写动画经常会用到这几个属性，他们之间有什么区别呢？
1.transform
每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性。它其实只是一个静态属性，需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样，只是一个静态样式而已。
它可以让元素偏移、伸缩、变形、旋转等。
具体的给设计师改变元素样式用的属性则有以下五个： translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。
2.transition
它属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。
<div class="transform"></div>
.transform{
width:100px;
height:100px;
background: red;
transition: all 1s ease-out;
}
.transform:hover{
transform:rotate(360deg);
}
3.Animation
详细讲解请看我的另外一篇文章：http://www.cnblogs.com/freefish12/p/5510210.html
.context{
width:100px;
height:100px;
background: blue;
left:0;
position:absolute;
}
@keyframes move{
from{
transform: rotateY(180deg);
}
to{
transform: rotateY(360deg);
}
}
.context:hover{
animation: move 0.5s infinite alternate;
}
<div class="context">
<div class="sub-context"></div>
</div>