
定义和用法
一些 CSS 属性可用于动画制作,这意味着它们可用于过渡等效果中。
可设置动画的 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- |
背景色渐变动画
下面设置一个背景颜色从红色到蓝色的来回改变的动画:
.animate{
width: 300px;
height: 200px;
background: red;
animation: bgChange 5s infinite;
}
@keyframes bgChange {
0% {
background-color: #ffb96f;
}
33% {
background-color: #ff8f64;
}
66% {
background-color: #bf45ff;
}
100% {
background-color: #ffb96f;
}
}
实例演示效果:
动画相关属性
下面的表格中列出了 CSS 中的动画相关属性:
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
44
章节
79
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈