前端控
- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
CSS 动画
定义和用法
一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。
 |  |  |  |  |
| 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
背景颜色逐渐地从红色变化到蓝色：
@keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}点击 "运行实例" 按钮查看在线实例
效果图：
动画属性
CSS 中的动画属性：
| 属性 | 描述 | 继承性 | CSS版本 | ||
| animation | 复合属性。检索或设置对象所应用的动画特效 | 无 | CSS3 | ||
| animation-name | 检索或设置对象所应用的动画名称 | 无 | CSS3 | ||
| animation-duration | 检索或设置对象动画的持续时间 | 无 | CSS3 | ||
| animation-timing-function | 检索或设置对象动画的过渡类型 | 无 | CSS3 | ||
| animation-delay | 检索或设置对象动画延迟的时间 | 无 | CSS3 | ||
| animation-iteration-count | 检索或设置对象动画的循环次数 | 无 | CSS3 | ||
| animation-direction | 检索或设置对象动画在循环中是否反向运动 | 无 | CSS3 | ||
| animation-play-state | 检索或设置对象动画的状态 | 无 | CSS3 | ||
| animation-fill-mode | 检索或设置对象动画时间之外的状态 | 无 | CSS3 | ||
推荐手册