css3 - transform, transition 与 translate

零.序言

　　css 3 的新特性，不少都停留在据说而非实际使用。transform， transition， translate 这三长得实在太像，刚开始的时候老是迷迷糊糊，分不清它们的功能。而最近新接入的项目以视觉效果为主，故也算是被动弄清基础含义。

 

　　先说结论，transform 与 transitions 是属性，如同 border、width 同样，咱们能够手动设置其值以达到效果；translate 是 transform 的其中一个值，如同 auto 是 width 是其中的一个值同样。

 

1、transform 转变

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

.container:hover {
  /* transform: scale(2,2) */
  transform: translateY(50%)
}
.other {
  background-color: #333;
}


<div class="container"></div>
<div class="other"></div>

 

　　从上例中，咱们能够看出，transform 是突变的，而且它转变以后并不挤压其余元素在文档流中的位置。

　　至于 transform 有哪些值，咱们能够参看 MDN 或者 w3c 。

 

2、transition 过渡

　　相对于 transform，transition 则引入了时间概念，所以这再也不是突变，而是当它所绑定的属性（好比width）发生改变的时候，会根据速度曲线慢慢变化。

　　以下例：

.container {
  transition: height 1s; 
}
.container:hover {
  height: 700px;
}
.other {
  background-color: #333;
}

<div class="container"></div>
<div class="other"></div>

 

　　从上面咱们能够看出， 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;
}


<div class="container">
  <div class="child"></div>  
</div>
<div class="other"></div>

 

 

　　另外，不是全部的 css 属性都能 transition，好比 transition: display 就不会生效。只有“可被用于动画的属性”(MDN - 可被用于动画的属性) 才可以生效。

 

3、混合使用

　　不少成熟的网站上，这二者常常混合使用，从而造成了一种动画效果。固然，这并非真正的动画，此外，正是由于混合使用，因此在初学的时候贼容易搞混，加上单词又长得很像，就容易迷糊。固然了，混合使用的时候也容易出现各类各样的坑，故必定要耐心调试...

　　下面是一个简单的 demo:

.container {
  transition: all 1s; 
}
.container:hover {
  transform: translateY(50%);
  height: 400px;
}


<div class="container"></div>
<div class="other"></div>

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

 

4、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;
  }
}

 

5、最后

　　css3 的新特性，对于 IE 来讲都作不到完美兼容，若是须要照顾老项目，优先不考虑 css 3 的这些新特性。可是，对于新项目，使用这些新的特性绝对可以带来非凡的体验。