CSS3的过渡和动画

过渡

CSS3提供了一个过渡属性，让元素样式的改变有了动画的效果
transition属性有4个子属性

transition-property: 需要过渡的属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transition-timing-function: 过渡函数（默认值为ease函数）
transition-delay: 过渡延迟时间(默认值为0s)

也可以采用简写的形式：

transition: property || duration || timing-function || delay

简写的方式在省略某属性时，则该属性采用默认值，duration属性不能省略，否则没有过渡的意义。

transition-property并不是所有属性都能过渡，对于突变的属性（没有中间值）如display不能过渡。要过渡其中某些属性时，可以用逗号隔开如：

transition: width 2s, height 2s;  //推荐写法
transition: width,height 2s,2s;   //必须写两个时间，否则width的过渡时间默认为0

transition-timing-function属性规定过渡效果的速度曲线。
过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数

过渡如何触发？
只有在元素样式发生改变时，过渡会以初始样式为起点以改变后样式为终点进行过渡。
伪类(:hover)或js是常见的用来改变元素样式的方法

---

动画

动画和过渡有些类似，不过还是有区别。先介绍动画，再来比较两者之间的区别。
一个元素要应用动画需要两个步骤：创建动画，调用动画。
创建动画：

@keyframes animation-name{
    0% { background-color: #000; }
    n% {
     }
    100% { background-color: #fff; }
}

以@keyframes开头，后面紧跟着动画名称animation-name。然后用百分比定义动画不同阶段的样式。to和from也可以代表0%和100%，不过浏览器的支持不好，所以还是尽量用百分比定义。

创建动画后需要元素添加这个动画

animation: animation-name 2s;

animation有8个子属性：

animation-name: 动画名称(默认值为none)
animation-duration: 动画完成一周期的时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)

• animation-duration定义动画完成一周期的时间，也就是0%的样式到100%的样式的时间
• animation-timing-function定义样式变化快慢的函数，和transiton的一样
• animation-iteration-count定义动画播放的次数，默认为一次，infinite表示无限播放。样式从0%变化到100%算是一次，当样式变化到100%后，样式瞬间变化到0%，准备下一此播放
• animation-direction：默认情况下（normal），每当动画播放一次后就瞬间回到动画第一帧，这是没有过渡效果的，我们能不能在动画播放到100%后再从100%以动画的形式回到0%。animation-direction:alternate表示动画在播放到100%后再反向播放（反向播放也算次数）
• animation-play-state规定动画的播放状态。默认是running表示播放，paused表示暂停

animation-fill-mode表示元素在动画执行前后的状态，默认为none
none：表示动画执行完成后，元素回到元素初始化状态（不是动画的第一帧）
backwards：每个动画在执行前都有一个延迟时间，backwards表示元素在这个时间段的样式为动画第一帧。若delay为0，则和none效果相同
forwards：当动画结束时，元素的状态和动画最后一帧状态一致。
both：相当于同时设置backwards和forwards。

可以对比使用animation-fill-mode前后的区别：

div{
    width: 100px;
    height: 100px;
    background-color: orange;
    animation-name: test;
    animation-duration: 2s;
    //animation-fill-mode:forwards;
    //animation-delay:2s; animation-fill-mode:backwards;
}
@keyframes test{
    0% { background-color: #000; }
    100% { background-color: #fff; }
}

div元素的初始状态为桔黄色。div的动画没有延迟，直接播放动画，黑色为动画的第一帧，从黑色慢慢变化为白色（动画的最后一帧）。动画结束后，元素回到元素初始状态（桔黄色）。
设置animation-fill-mode:forwards后，在动画结束时，元素状态和动画最后一帧一致（白色）;
设置animation-delay:2s; animation-fill-mode:backwards后，div在动画开始前2s内状态为动画第一帧（黑色），2s后开始播放动画。动画结束后元素回到元素初始状态（桔黄色）。
设置animation-fill-mode:both，效果相当于同时设置了forwards和backwards
动画的第一帧并不一定是0%，（animation-direction:reverse可以反向播放），动画的最后一帧也并一定是100%。当动画没有定义0%或100%时，forwards和backwards以元素初始状态为准。

---

总结一下transition和animation的区别：

• transition比animation更简单，它只对元素的初始样式和改变后的样式进行过渡；而@keyframes可以定义多个关键帧
• transition只有在元素样式改变后才触发，而元素只要定义了animation后就能自动播放动画
• 使用了transition的元素样式一定会发生改变（不然元素不会过渡），而设置动画的元素会在动画结束后，回到元素的初始状态（除去animation-fill-mode属性）

另外要注意浏览器对transition和animation属性的支持，注意添加浏览器前缀。