進入css3動畫世界（二）

今天主要來講transition和transform入門，以後會用這兩種屬性配合做一些動效。

註：本文面向前端css3動畫入門人員，我對這個也了解不深，如本文寫的有紕漏請指出，不喜勿噴。

transition屬性

從中文翻譯來講，這是一個過渡屬性，而這個屬性的屬性值有四種：
transition: property duration timing-function delay
第一個是起作用的屬性名，第二個是動畫持續的時間，第三個是速度效果的曲線，第四個是過渡效果延遲多久後開始。
而我經常用的是第二個屬性值，其次是速度曲線。

下面我們用hover試下不同的效果：

源碼：

<div class="idiv" id="change-width">改變寬度</div>
<div class="idiv" id="dur-3s">持續3秒</div>
<div class="idiv" id="linear">勻速3秒</div>
<div class="idiv" id="delay-1s">延遲1秒</div>

.idiv{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    margin: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 100px;
    text-align: center;
}
#change-width{
    transition: width 0.5s;
}
#change-width:hover{
    width: 300px;
}
#dur-3s{
    transition: 3s;
}
#dur-3s:hover{
    width: 300px;
}
#linear{
    transition: 0.5s linear;
}
#linear:hover{
    width: 300px;
}
#delay-1s{
    transition: 0.5s 1s;
}
#delay-1s:hover{
    width: 300px;
}

transform屬性

transform的意思是變換。

transform的變換很多，我可能沒那麽深入去學，但是我們可以了解一下基本的幾種動畫：
translate(),rotate(),scale(),就憑這幾種基本的動畫加上你的想象力，就可以做出上一篇我們提到那頭大象了。當然，這些transform的屬性值最後還可以用一個屬性值matrix()完成，具體可以去膜拜一下張鑫旭關於matrix()的描述。

我們暫時只討論2d情況下的transform，當然還有一個skew()我沒怎麽用過。

translate

translate()是平移,translateX(x)沿著x軸平移,translateY(y)沿著y軸平移,translate(x,y)沿著xy軸同時平移：

<div class="idiv" id="div1">div1 x平移</div>
<div class="idiv" id="div2">div2 y平移</div>
<div class="idiv" id="div3">div3 xy平移</div>

.idiv{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    margin: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    transition: 0.5s;
}
#div1:hover{
    transform: translateX(20px);
}
#div2:hover{
    transform: translateY(20px);
}
#div3:hover{
    transform: translate(20px,20px);
}

rotate

rotate()是旋轉，2d的情況下，rotate()只接收一個角度作為參數。

<div class="idiv" id="rotate30">順時針旋轉30°</div>
<div class="idiv" id="rotate60">順時針旋轉60°</div>
<div class="idiv" id="rotate90">順時針旋轉90°</div>
<div class="idiv" id="rotate-30">逆時針旋轉30°</div>
<div class="idiv" id="rotate-60">逆時針旋轉60°</div>
<div class="idiv" id="rotate-90">逆時針旋轉90°</div>

.idiv{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    margin: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    transition: 0.5s;
}
#rotate30:hover{
    transform: rotate(30deg);
}
#rotate60:hover{
    transform: rotate(60deg);
}
#rotate90:hover{
    transform: rotate(90deg);
}
#rotate-30:hover{
    transform: rotate(-30deg);
}
#rotate-60:hover{
    transform: rotate(-60deg);
}
#rotate-90:hover{
    transform: rotate(-90deg);
}

scale()

scale()是縮放，和translate()一樣，接收1-2個參數。scaleX(x)，scaleY(y)，scale(x,y):

<div class="idiv" id="scalex">x軸放大到1.5倍</div>
<div class="idiv" id="scaley">y軸縮小到0.5倍</div>
<div class="idiv" id="scalexy">xy軸放大到2倍</div>

.idiv{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    margin: 5px;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    transition: 0.5s;
}
#scalex:hover{
    transform: scaleX(1.5);
}
#scaley:hover{
    transform: scaleY(0.5);
}
#scalexy:hover{
    transform: scale(2,2);
}

文章來源：