css3-transform,transition与translate

零.序⾔

　　css 3 的新特性，很多都停留在听说⽽⾮实际使⽤。transform， transition， translate 这三长得实在太像，刚开始的时候总是迷迷糊糊，分不清它们的功能。⽽最近新接⼊的项⽬以视觉效果为主，故也算是被动弄清基础含义。

　　先说结论，transform 与 transitions 是属性，如同 border、width ⼀样，我们可以⼿动设置其值以达到效果；translate 是 transform 的其中⼀个值，如同 auto 是 width 是其中的⼀个值⼀样。

⼀、transform 转变

　　这是⼀个静态的属性，如同 border ⼀样，设置之后⽴即改变，改变不需要时间参与。它的作⽤是专注于改变元素基于默认位置的某些状态（如平移、缩放、旋转等），如下案例：

.container:hover {

/* transform: scale(2,2) */ transform: translateY(50%)}

.other {

background-color: #333;}

　　从上例中，我们可以看出，transform 是突变的，并且它转变之后并不挤压其他元素在⽂档流中的位置。　　⾄于 transform 有哪些值，我们可以参看 或者 。

⼆、transition 过渡

　　相对于 transform，transition 则引⼊了时间概念，因此这不再是突变，⽽是当它所绑定的属性（⽐如width）发⽣改变的时候，会根据速度曲线慢慢变化。　　如下例：

.container {

transition: height 1s; }

.container:hover { height: 700px;}

.other {

background-color: #333;}

　　从上⾯我们可以看出， transition 绑定的是元素某⼀个已经存在的属性值，这个属性值再某种状态下发⽣了变化，⽽ transition 专注于将这种改变添加个速度曲线，使得元素平滑转变，不显得很突兀。

　　从上图中我们也可以看出，因为 transition 过渡中某些属性被修改了，必然引起布局上的变化，这个有好处也有坏处，⾄于是看重效果还是看重性能，则需根据实际情况来定。

　　（这⾥有个建议，上例中，transition 是写在 .container{} 中的，因此，在⿏标移出之后也会有个平滑地回退过程，⽽将 transition 写在.container:hover {} 中，⿏标移出后不会有平滑回退）

　　当然，如同其他属性⼀样，transition ⽀持嵌套：

.container {

transition: height 1s; }

.child {

width: 100px; height: 100px;

background-color: red; transition: all 1s;

}

.container:hover .child { width: 300px;}

.container:hover { height: 400px;}

　　另外，不是所有的 css 属性都能 transition，⽐如 transition: display 就不会⽣效。只有“可被⽤于动画的属性”( - ) 才能够⽣效。

三、混合使⽤

　　很多成熟的⽹站上，这两者经常混合使⽤，从⽽形成了⼀种动画效果。当然，这并不是真正的动画，此外，正是因为混合使⽤，所以在初学的时候贼容易搞混，加上单词⼜长得很像，就容易迷糊。当然了，混合使⽤的时候也容易出现各种各样的坑，故⼀定要耐⼼调试...　　下⾯是⼀个简单的 demo:

.container {

transition: all 1s; }

.container:hover {

transform: translateY(50%); height: 400px;}

　　这个例⼦中，设置 .container 沿 y 轴正向平移 50%，那么，猜⼀猜平移了多少 px ？ o(￣▽￣)ｄ

四、transition 与 animation

　　animation 与 transition ⼀起于 css3 中引⼊，在⽤法上也与 transition 上很相似，甚⾄很多的属性值如动画去线，执⾏时间等都⼀样。那么这两个有什么区别呢？

　　先从整体上，transition 其实只有两个状态（关键帧），变化前的(start)和变化后的(end)，⽽ animation 则可以⼈为设置多个状态（关键帧），这⼀点上，我们可以做出更丰富的视觉效果；transition 需要显式设定触发条件，如使⽤ hover，动态增加/删除 css 类来修改某些属性， animation则不需要显式控制，⼀旦定义之后，它将⾃动开始执⾏。

　　从细节上来看，transition 的触发⽅式决定了其不具有循环的特点，当然，使⽤ js 定时器来模拟循环也是⼀种思路，animation 则⾃带循环设置，animation-iteration-count 这个就可以指定循环重复次数；另外，transition 是直接在定义语句中绑定属性值，如 transition：width 1s ，⽽animation 定义语句中绑定的是动画名字，如 animation: yourAniName 1s ... ，再在 @keyframes 中的每个关键帧中描述需要改变的属性的值。　　下⾯是⼀个简单的 demo:

// transition.container { height: 300px; transition: all 1s; }

.container:hover {

transform: translateY(50%); height: 400px;}

// animation.container {

animation: myAni 3s linear 1s infinite normal;}

@keyframes myAni { 0%, 100% { height: 300px; }

20%, 80% {

height: 400px; width: 550px; }

50% {

height: 500px; width: 600px; }}

五、最后

　　css3 的新特性，对于 IE 来说都做不到完美兼容，如果需要照顾⽼项⽬，优先不考虑 css 3 的这些新特性。但是，对于新项⽬，使⽤这些新的特性绝对能够带来⾮凡的体验。