css3之动画(animation)
css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画)。具体如何使用呢???
首先定义一个动画,然后引用动画。
定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字。关键字"from"表示开始, "to"表示结束,等同于0% 和 100%。最好使用百分比来表示变化发生的时间,这样的话还可以定义从开始到结束中间的其它的时间状态,例如,25%,50%等等,而且使用百分比的话,浏览器的兼容性会更好。
创建过动画之后,需要绑定到选择器样式上面,这样就可以在HTML中直接引用样式,从而实现动画效果。
例如:a.定义一个从红色到黄色的动画。
@keyframes redToYelloAnimate { from {background: red;} to {background: yellow;} }
b.定义一个选择器div的样式,使用animation属性引用动画。动画的名字是redToYelloAnimate,用2s时间,从红色变到黄色。
div{ animation: redToYelloAnimate 2s; }
animation是动画所有属性的的简写。具体包含:
animation-name: 规定@keyframes动画的名称,就是你定义动画时所起的名字。
animation-duration:完成一次完整的动画需要花费的时间,注意单位是s(秒)或者ms(毫秒),默认是0,所以这个属性必须赋值,不然没动画效果。
animation-timing-function:规定动画的速度曲线。默认是“ease”,动画是低速开始,然后加快,最后变慢直至结束。
animation-delay:动画延迟的时间,默认是0。
animation-iteration-count:动画被播放的次数,默认是1。
animation-direction:动画是否在下一个周期逆向地播放
animation-play-state:动画是否正在运行或暂停,默认是“running”
animation-fill-mode:规定对象动画时间之外的状态。
有几个属性需要说一下:
animation-timing-function规定动画的速度曲线,使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线,提供了几个值,你也可以自己定义值。linear:动画一直匀速运动。ease-in 动画低速开始。ease-out动画低速结束。ease-in-out:动画低速开始和结束。cubic-bezier(n,n,n,n):在cubic-bezier 函数中定义自己的值。
animation-iteration-count动画播放的次数,值是n次或者无限次infinite。
animation-direction:alternate是反向播放,如果动画设为只播放一次,alternate不会有效果。有时需要slidedown下拉的效果,如果可以反向播放,那么slideup收起的动作就可以使用同一个动画了?!!!一开始欣喜若狂,后来发现,只播放一次,是不会有效果的,所以slidedown和slideup使用同一个动画,不可行。。。真是个大缺憾啊。。。。。。。
animation-fill-mode:none | forwards | backwards | both
none不改变默认行为。
forwards 当动画完成之后,保持最后一个属性值。如上面的例子中,如果想让div在动画结束之后一直保持黄色的话,就需要使用这个值。
backwards 在animation-delay 所制定的一段时间内,动画开始之前,使用开始属性值。
both 向前和向后填充模式都被应用。