码迷,mamicode.com
首页 > Web开发 > 详细

css3动画效果

时间:2017-06-27 21:17:28      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:暂停   war   state   tin   css3   rect   key   sla   mod   

添加动画效果:

1 animation-name:指定动画名称
2.animation-duration:设置动画的总耗时
3.animation-duration:设置的动画的播放次数,默认为1次,可以指定具体的数值,也可以指定infinite(无限次)
4.animation-direction:alternate :社会交替动画   alternate来回交替
5.animation-delay:2s 这是动画的延迟
 
设置动画结束时的状态:默认情况下,动画执行完毕之后,会回到原始状态animation-fill-mode:both  || forwards || backwards
forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,name会立刻进行到初始状态
both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态
animation-tining-function:linear    匀速的   动画的事件函数
animation-play-state:running  || paused          播放 || 暂停
创建动画 @keyframes  dong(动画名字) {
    0%{ transform:translate( )  ....... }   ||  from相当于0%
    50%{        }
    。。。。。
    100%{    }    ||   to{    }  to相当于100%
 
}

 

 

css3动画效果

标签:暂停   war   state   tin   css3   rect   key   sla   mod   

原文地址:http://www.cnblogs.com/huile/p/7087149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!