CSS3animation介绍_html/css_WEB-ITnose

上一篇transition过渡属性通过让属性在时间段内根据贝塞尔曲线平滑过渡，呈现出动画效果，但毕竟功能有限。本篇介绍的animation属性和传统的动画制作一样，能控制帧的每一步，制作出更强大的动画效果。

和其他CSS3属性类似，animation包含很多子属性，我们一起看看：

animation-name animation-duration animation-time-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode @keyframes

animation-name 指定@keyframes的名字，CSS加载时会应用该名字的@keyframes规则来实现动画

animation-duration 动画持续时间，默认是0表示无动画，单位可以设s秒或ms毫秒

animation-time-function 动画播放方式，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。关于贝塞尔曲线和steps可以参照上一篇transition，和transition-timing-function类似，不多赘述。

animation-delay 延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。

animation-iteration-count 动画循环播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

animation-direction 动画播放的方向，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。看效果点这里

.myDiv1 {    width: 75px;    height: 75px;    background-color: red;    position:relative;    animation:aDirection 5s infinite;} @keyframes aDirection {    from {left:0px;}    to {left:200px;}}.alter { animation-direction:alternate; }.alterR { animation-direction:alternate-reverse; } 


      
查看更多关于CSS3animation介绍_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115046