css3 动画属性

transition

• Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
• Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
• Safari 支持替代的 -webkit-transition 属性。

transition 属性是一个简写属性，用于设置四个过渡属性：

值	属性
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线，主要有linear：以相同速度开始至结束的过渡效果；ease：慢速开始，然后变快，然后慢速结束的过渡效果；ease-in：以慢速开始的过渡效果；ease-out：规定以慢速结束的过渡效果；ease-in-out：规定以慢速开始和结束的过渡效果；cubic-bezier(0.42,0,0.58,1):定义自己的值,在0和1之间;
transition-delay	定义过渡效果何时开始

可简写为：transition: property duration timing-function delay;

例如：

<style>
    .box{ width: 200px; height: 200px; background: #00f; transition: width 1s linear; }
    .box:hover{ width: 800px; }
</style>
<div class="box"></div>

transform:

• Internet Explorer 10、Firefox、Opera 支持 transform 属性。
• Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
• Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
• Opera 只支持 2D 转换。

transform: none|transform-functions;可以对transform进行转换的参数众多。具体可以参考w3c中的transform.

animation

• Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
• Safari 和 Chrome 支持替代的 -webkit-animation 属性。
• 注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

animation 属性是一个简写属性，一般写作animation: name duration timing-function delay iteration-count direction;用于设置下面六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframes 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线，与transition中的一样。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数，主要有infinite和n，n为几就是几次
animation-direction	规定是否应该轮流反向播放动画,有normal

另外还可以添加animation-fill-mode属性，用于规定动画在播放之前或之后，其动画效果是否可见。其属性值主要有：

• none 不改变默认行为。
• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
• backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
• both 向前和向后填充模式都被应用。

例如让正方形从宽度200px在1s内涨到400px，并停留在最后一帧：

.box{ width: 200px; height: 200px; background: #00f;}
.box:hover{ animation: animations 1s forwards; -webkit-animation: animations 1s forwards; }
@keyframes animations{
     0%{ width: 200px; }
     100%{ width: 400px; }
}