CSS3动画简介

最初接触页面元素动画是jquery的animate函数,这个函数结合其他jquery方法基本可以满足各种动画需求。但随着css的快速发展,不用javascript同样也可以做出绚丽的动画效果。css3中可以设置动画效果的属性有两个:Transition和Animation,下面就简单介绍一些这两个属性的使用。

操作方法

（01）transition相对简单，只需要指定以下几个属性即可。transition-property: 参与过渡的属性,比如 height、width等css样式，所有样式用关键字“all”，没有样式需要过渡使用“none”。transition-duration: 过渡持续的时间，单位是秒（s）,比如 width从100px过渡到200排序需要的时间。transition-timing-function: 过渡的动画类型，有以下几种取值。linear：线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。ease：平滑过渡，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。ease-in：由慢到快，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。ease-out：由快到慢，等同于贝塞尔曲线(0, 0, 0.58, 1.0)。ease-in-out：由慢到快再到慢，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。transition-delay: 动画延迟执行的时间。-------------------transition样式的写法---------------------transition同background属性一样有缩写和拆分两种方式，就是说你可以把每个属性都加到transition后，如 transition: border-color .5s ease-in .1s;也可以把这些属性拆分，分别设置在个属性之后，上边的缩写拆分后如下：transition-property: border-color;transition-duration: .5s;transition-timing-function: ease-in;transition-delay: .1s;如果需要对个样式设置过渡动画，可以用逗号分开，缩写如：transition: border-color .5s ease-in .1s，color .3s ease .2s;拆分写法如：transition-property: border-color, color;transition-duration: .5s, .3s;transition-timing-function: ease-in, ease;transition-delay: .1s, .2s;拆分写法中如果某个属性是多组共用的，则不需要分别设置，比如：transition-duration: .5s, .5s; ---> transition-duration: .5s;但是transition有几个很大的局限。（1）transition需要事件触发，所以没法在网页加载时自动发生。（2）transition是一次性的，不能重复发生，除非一再触发。（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。所以就诞生了animation属性，相对transition略显复杂，但是功能更强大。

（02）animation与transition有几个相同的属性，duration、timing-function、delay。animation-name：animation需要指定动画的名字，这个是用来在@keyframes中指定执行动画的样式。animation-durarion：动画的执行时间，单位s（秒）。animation-timing-function：动画类型，取值与transition相同。animation-delay：动画延迟时间，单位s（秒）。animation-iteration-count：动画执行的次数，这个属性就客服了transition局限中的第二条，取值可以是数字指定具体循环几次，也可以设置关键字“infinite”无限循环。animation-direction：动画在循环执行时是否反方向，取值“normal”正常方向、“alternate”正常与反向交替。animation-play-state：设置执行中动画的状态，取值“running”、“paused”。animation-fill-mode：设置动画执行时间之外的状态，取值“none”（默认，不设置）、forwards（动画结束时的状态）、“backwards”（动画开始时的状态）、“both”（开始或结束时的状态）。动画中的每个属性都介绍完毕之后，其实你应该还是一头雾水，这怎么可能产生动画，关键在于@keyframes中。----------------------------@keyframes-----------------------------给一个例子：@keyframes rainbow {from { background: #c00 }50% { background: orange }to { background: yellowgreen }}用百分比的形式表示一个动画周期中的各个状态，其中0%、100%可以分别用from、to表示，每个百分点的状态可以当做一个css class，可以设置多个样式哦，rainbow 就是animation-name的值。-------------------------------END------------------------------------至此CSS3的两种动画设置方式就简略的介绍完了。