过渡动画的使用

过渡（transition）动画

就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。

要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property：规定对哪个属性进行过渡

transition-duration：定义过渡的时间，默认是0

transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease

transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。通过addClass()添加类和removeClass移除类。

关键帧动画

动画完成后，把动画类移除，以便可以再次进行同一个动画。使用setTimeOut(function(){removeClass(),3000);