CSS3 animation 属性
浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
Internet Explorer 9 以及更早的版本不支持 animation 属性。
定义和用法
语法:
animation: name duration timing-function delay iteration-count direction;
animation 属性是一个简写属性,用于设置六个动画属性:
值
描述
animation-name
规定需要绑定到选择器的 keyframe 名称。。
animation-duration
规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。
animation-delay
规定在动画开始之前的延迟。
animation-iteration-count
规定动画应该播放的次数。
animation-direction
规定是否应该轮流反向播放动画。
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
实践
1、动画只能在页面初次渲染的时候显示,如何控制动画的展示时间呢?
答案很简单,动态添加animation-name,这样页面会识别动画是刚刚添加的。
2、如何让动画一直循环播放?
答案很简单,animation-iteration-count设置为infinite。
3、animation和transition的区别
与transition不同的是,animation可以通过keyframes显式控制当前帧的属性值,
而transition只能隐式来进行(不能指定每帧的属性值),所以相对而言animation的功能更加灵活。