css3中的transition與transform

容易混淆的css屬性：

屬性	含義
animation（動畫）	用於設置動畫屬性，他是一個簡寫的屬性，包含6個屬性
transition（過渡）	用於設置元素的樣式過渡，和animation有着相似的效果，但細節上有很大的不一樣
transform（變形）	用於元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫並無什麼關係，就至關於color同樣用來設置元素的「外表」
translate（移動）	translate只是transform的一個屬性值，即移動。

1.animation（動畫）

語法：animation: name duration timing-function delay iteration-count direction;

1. name（須要綁定到選擇器的 keyframe 名稱）
2. duration（完成動畫所花費的時間，以秒或毫秒計）
3. function（動畫的速度曲線）
4. delay（動畫開始以前的延遲）
5. count（動畫應該播放的次數）
6. direction（是否應該輪流反向播放動畫）

div {
  width: 100px;
  height: 100px;
  background: #1199ff;
  position: relative;
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
  from {
      left: 0px;
  }
  to {
      left: 200px;
  }
}
@-webkit-keyframes mymove {
  from {
      left: 0px;
  }
  to {
      left: 200px;
  }
}

2.transition（過渡）

語法：transition: property duration timing-function delay;

1. property（設置過渡效果的 CSS 屬性的名稱）
2. duration（完成過渡效果須要多少秒或毫秒）
3. function（速度效果的速度曲線）
4. delay（過渡效果什麼時候開始）

div {
  width: 100px;
  height: 100px;
  background: #ee1166;
  transition: width 2s;
  -moz-transition: width 2s;
  /* Firefox 4 */
  -webkit-transition: width 2s;
  /* Safari and Chrome */
  -o-transition: width 2s;
  /* Opera */
}
div:hover {
  width: 300px;
}

3.transform（變形）

語法：transform: none|transform-functions;
functions提供多種方法，如：skewX(angle)沿着 X 軸的 2D 傾斜轉換，translate3d(x,y,z)3D 轉換，rotate(angle)2D 旋轉，在參數中規定角度等等

/**css*/
ul {
  margin: 20px 0 0 20px;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  width: 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 4px;
  background: #ee1166;
  -webkit-transform: skewX(30deg);
}
a {
  text-decoration: none;
  -webkit-transform: skewX(-30deg);
  display: block;
  color: #fff;
}
li:hover{
  background: #008cf4;
}
/**html*/
<ul>
    <li><a href="#">Javan的博客</a></li>
    <li><a href="#">今日頭條</a></li>
    <li><a href="#">慕課網</a></li>
    <li><a href="#">開源中國</a></li>
</ul>

 

4.translate（移動）

translate實際上是 transform的一種屬性值，進去2D或者3D移動

1. translate(x,y) 2D平移，x/y分別是x座標平移多少像素，y座標平移多少像素
2. translate3d(x,y,z) 3D平移，和2D同樣