手册
目录
一些 CSS 属性可用于动画制作,这意味着它们可用于过渡等效果中。
可设置动画的属性可以从一个值逐渐更改为另一个值,例如尺寸、数字、百分比和颜色。
表格中的数字注明了完全支持 CSS 动画的首个浏览器版本。
-webkit-、-moz- 或 -o- 后面的数字注明了使用前缀的第一个版本。
|
43.0 4.0 -webkit- |
10.0 |
16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
设置背景颜色从红色到蓝色的动画:
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
下面的表格中列出了 CSS 中的动画相关属性:
| 属性 | TIY |
|---|---|
| background | 试一试 |
| background-color | 试一试 |
| background-position | 试一试 |
| background-size | 试一试 |
| border | 试一试 |
| border-bottom | 试一试 |
| border-bottom-color | 试一试 |
| border-bottom-left-radius | 试一试 |
| border-bottom-right-radius | 试一试 |
| border-bottom-width | 试一试 |
| border-color | 试一试 |
| border-left | 试一试 |
| border-left-color | 试一试 |
| border-left-width | 试一试 |
| border-right | 试一试 |
| border-right-color | 试一试 |
| border-right-width | 试一试 |
| border-spacing | 试一试 |
| border-top | 试一试 |
| border-top-color | 试一试 |
| border-top-left-radius | 试一试 |
| border-top-right-radius | 试一试 |
| border-top-width | 试一试 |
| bottom | 试一试 |
| box-shadow | 试一试 |
| clip | 试一试 |
| color | 试一试 |
| column-count | 试一试 |
| column-gap | 试一试 |
| column-rule | 试一试 |
| column-rule-color | 试一试 |
| column-rule-width | 试一试 |
| column-width | 试一试 |
| columns | 试一试 |
| filter | 试一试 |
| flex | 试一试 |
| flex-basis | 试一试 |
| flex-grow | 试一试 |
| flex-shrink | 试一试 |
| font | 试一试 |
| font-size | 试一试 |
| font-size-adjust | |
| font-stretch | |
| font-weight | 试一试 |
| grid | 试一试 |
| grid-area | 试一试 |
| grid-auto-columns | 试一试 |
| grid-auto-flow | 试一试 |
| grid-auto-rows | 试一试 |
| grid-column | 试一试 |
| grid-column-end | 试一试 |
| grid-column-gap | 试一试 |
| grid-column-start | 试一试 |
| grid-gap | 试一试 |
| grid-row | 试一试 |
| grid-row-end | 试一试 |
| grid-row-gap | 试一试 |
| grid-row-start | 试一试 |
| grid-template | 试一试 |
| grid-template-areas | 试一试 |
| grid-template-columns | 试一试 |
| grid-template-rows | 试一试 |
| height | 试一试 |
| left | 试一试 |
| letter-spacing | 试一试 |
| line-height | 试一试 |
| margin | 试一试 |
| margin-bottom | 试一试 |
| margin-left | 试一试 |
| margin-right | 试一试 |
| margin-top | 试一试 |
| max-height | 试一试 |
| max-width | 试一试 |
| min-height | 试一试 |
| min-width | 试一试 |
| object-position | 试一试 |
| opacity | 试一试 |
| order | 试一试 |
| outline | 试一试 |
| outline-color | 试一试 |
| outline-offset | 试一试 |
| outline-width | 试一试 |
| padding | 试一试 |
| padding-bottom | 试一试 |
| padding-left | 试一试 |
| padding-right | 试一试 |
| padding-top | 试一试 |
| perspective | 试一试 |
| perspective-origin | 试一试 |
| right | 试一试 |
| text-decoration-color | 试一试 |
| text-indent | 试一试 |
| text-shadow | 试一试 |
| top | 试一试 |
| transform | 试一试 |
| transform-origin | 试一试 |
| vertical-align | 试一试 |
| visibility | |
| width | 试一试 |
| word-spacing | 试一试 |
| z-index | 试一试 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习