在css学习中，尤其是动画部分，相信很多人都会接触过transform，transition以及animation属性，如果望文生义从字面上这些词翻译成中文好像都差不多，其实他们三者分别还是很大的。

transform

先来看跟变形金刚transformer很像的transform，** 首先要注意的是transform属性是静态属性！静态属性！静态属性！只要写进style里就会直接显示生效，不会出现动画过程。**通过使用transform属性，能够对元素进行移动（translate）、缩放（scale）、旋转（rotate）、翻转（skew）。对于这些就不展开说，有兴趣的可以自行实践下就明白了。

div
{
transform: translate(50px,100px) rotate(30deg);
-ms-transform: translate(50px,100px) rotate(30deg);     /* IE 9 */
-webkit-transform: translate(50px,100px) rotate(30deg); /* Safari and Chrome */
-o-transform: translate(50px,100px) rotate(30deg);      /* Opera */
-moz-transform: translate(50px,100px) rotate(30deg);        /* Firefox */
}

transition

不同于静态的transform，被称为过渡的transition是一个简单的动画属性，可以看作是是animation的简化版本，通常拿来配合事件触发使用，简单易用。
他的语法是transition: property duration timing-function delay;
单纯的代码不会触发过渡操作，需要通过用户的行为（如点击，悬浮等）触发，常见的触发的方式有：

• :hover
• :focus
• :checked
• 媒体查询触发
• javascript触发

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s ease-in-out 1.5s;
-moz-transition:width 2s ease-in-out 1.5s; /* Firefox 4 */
-webkit-transition:width 2s ease-in-out 1.5s; /* Safari and Chrome */
-o-transition:width 2s ease-in-out 1.5s; /* Opera */
}
div:hover
{
width:300px;
}

transition的属性

顺带一提transition-property的注意事项，他的可取值如下

• none ：没有属性会获得过渡效果。
• all ：所有属性都将获得过渡效果。
• property ：定义应用过渡效果的 CSS 属性名称列表，以逗号分隔。

不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。完整列表，见这里。

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

animation

最后来说说最强的animation，animation与keyframes属性搭配使用，有类似flash的概念，animation实现动画效果主要由两部分组成：

（1）通过类似Flash动画中的帧来声明一个动画

（2）在animation属性中调用关键帧声明的动画。

关键帧 keyframe 实现自定义动画，通过对关键帧的设定来实现，也就是规定从起始点（0%）到终点（100%）之间的具体节点上的动画样式。就好比一个人起床，睁开眼睛（0%），站起来（10%），穿上衣（40%），穿裤子（80%），整理面容（100%），这样子把每个节点串起来便是动画了。上面提到的transition局限性在于只有两个状态，其实就是相当于只能定义0%和100%。而animation能够自定义任意时间段节点的动画动作。

当在 @keyframes中创建动画时，需要将它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称(animation-name)
• 规定动画的时长(animation-duration)

animation属性类似于transition，都是随着时间改变元素的属性值，其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

以下实例为把 "myfirst" 动画捆绑到 div 元素，时长：4 秒，infinite 表示运动次数为无限次，alternate 表示下一周期将逆向地播放。

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 4s infinite alternate;
-moz-animation:myfirst 4s infinite alternate;/* Firefox */
-webkit-animation:myfirst 4s infinite alternate; /* Safari and Chrome */
-o-animation:myfirst 4s infinite alternate; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
50%{background:blue; transform: translate(20px,-20px)}
75%{background:green;transform: translate(40px,0px) scale(1.5)}
100% {background:yellow;transform: rotate(-45deg)}
}

下面的表格列出了 @keyframes 规则和所有动画属性：

参考资料：
http://www.w3school.com.cn/css3/css3_animation.asp
http://www.cnblogs.com/aimyfly/p/3195898.html
http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135