css3 动画相关笔记

一、transition：过度
（1）transition-property：指定过渡的属性值，比如transition-property:opacity就是只指定opacity属性参与这个过渡。
（2）transition-duration：指定这个过渡的持续时间
（3）transition-delay：延迟过渡时间
（4）transition-timing-function：指定过渡动画缓动类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。

transition的优点在于简单易用，但是它有几个很大的局限。 
（1）transition需要事件触发，所以没法在网页加载时自动发生。 
（2）transition是一次性的，不能重复发生，除非一再触发。 :hoever :focus :checked 媒体查询触发 JavaScript触发
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 

二、tansform：变换

三、animation：动画

ainimation实现动画效果主要由两部分组成： 
1）通过类似Flash动画中的帧来声明一个动画； 
2）在animation属性中调用关键帧声明的动画。

animation动画属性：

（1）animation-name：none为默认值，将没有任何动画效果，其可以用来覆盖任何动画 
（2）animation-duration：默认值为0，意味着动画周期为0，也就是没有任何动画效果 
（3）animation-timing-function：与transition-timing-function一样 
（4）animation-delay：在开始执行动画时需要等待的时间 
（5）animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放 
（6）animation-direction：默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放 
（7）animation-state：默认为running，播放，paused，暂停 
（8）animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。