手册
目录
一些 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万人学习
							
							共29课时
61.7万人学习
							
							共25课时
39.3万人学习
							
							共43课时
70.9万人学习
							
							共25课时
61.6万人学习
							
							共22课时
23万人学习
							
							共28课时
33.9万人学习
							
							共89课时
125万人学习