标签：
写动画经常会用到这几个属性，他们之间有什么区别呢？
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>
css中关于transform、transition、animate的区别
标签：
原文地址：http://www.cnblogs.com/freefish12/p/5580527.html
