剛接觸css的時(shí)候一直很困惑動(dòng)畫(huà)的問(wèn)題熙涤。Transition趴樱，Transform還有Translate這些長(zhǎng)得很像的屬性都是什么隙弛？如何使用animation攘滩？這些雖然看起來(lái)很復(fù)雜很繁瑣庭猩，其實(shí)搞清楚之后很簡(jiǎn)單窟她，而且很實(shí)用，加了動(dòng)畫(huà)效果的網(wǎng)頁(yè)會(huì)立刻顯得生動(dòng)活潑蔼水。
CSS動(dòng)畫(huà)主要由兩個(gè)屬性來(lái)實(shí)現(xiàn)：
- Transition
- Animation + Keyframes
這篇文章主要介紹Transition震糖，關(guān)于Animation的看這里
transition的意思就是當(dāng)某個(gè)元素的某個(gè)屬性發(fā)生變化的時(shí)候，transition會(huì)幫你添加中間幀趴腋，讓這個(gè)變化不那么生硬吊说，比如下面這樣一個(gè)簡(jiǎn)單的box的hover動(dòng)畫(huà),如果不添加這一行transition代碼就會(huì)生硬的直接從方變成圓论咏。
基本語(yǔ)法
.element {
transition: [property] [duration] [ease] [delay];
變化屬性 變化時(shí)間 曲線(xiàn) 延時(shí)
}
比如.red { transition: opacity 300ms ease-in-out 1s;}意思就是transition會(huì)監(jiān)測(cè)這個(gè)class名為red的元素，如果這個(gè)元素的opacity發(fā)生了變化颁井，那么transition會(huì)幫你把這個(gè)變化變成一個(gè)持續(xù)時(shí)間300ms的動(dòng)畫(huà)厅贪，這個(gè)動(dòng)畫(huà)的速度曲線(xiàn)是ease-in-out，并且會(huì)有1s的延遲蚤蔓，也就變化的1s后開(kāi)始執(zhí)行動(dòng)畫(huà)卦溢。
理解了transition是什么之后，現(xiàn)在有兩個(gè)問(wèn)題：
- 有哪些屬性可以transition秀又？
- 怎么觸發(fā)transition单寂？
問(wèn)題一：有哪些屬性可以transition？
這里查看完整列表吐辙。
其實(shí)很簡(jiǎn)單宣决，概括的說(shuō)，只有兩類(lèi)屬性是適合（并且可以）transition的：transform和opacity昏苏，其中transform又分為三種類(lèi)型
Transform屬性
translate 尊沸，位移。
比如transform: translateY(15px)就是在y軸方向往下移動(dòng)15px贤惯。scale洼专，放大縮小
比如transform: scale(1.2)就是講元素放大1.2倍rotation，旋轉(zhuǎn)
比如transform: rotate(5deg)元素順時(shí)針旋轉(zhuǎn)15度
問(wèn)題2：如何觸發(fā)一個(gè)transition孵构？
常見(jiàn)方法也只有兩種：
- hover之類(lèi)的偽類(lèi)
- 通過(guò)class的改變
??1 通過(guò)hover偽類(lèi)觸發(fā)動(dòng)畫(huà)
<div class="trigger">
<div class="box"></div>
</div>
.trigger {
width: 200px;
height: 200px;
background: #ddd;
border: 20px solid #999;
}
.box {
display: inline-block;
background: pink;
width: 200px;
height: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
}
.trigger:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
transition屬性總是待在會(huì)發(fā)生變化的元素里等待某個(gè)屬性變化的來(lái)臨屁商。什么時(shí)候來(lái)臨呢？這就需要一個(gè)trigger的時(shí)機(jī)颈墅，在上面這個(gè)例子中就是當(dāng)box的父元素.trigger:hover的時(shí)候蜡镶。
注意其中 pointer-events這個(gè)屬性，如果不添加這一個(gè)屬性恤筛，當(dāng)hover box的時(shí)候官还，也會(huì)觸發(fā)這個(gè)transform。
???? 2 通過(guò)添加class觸發(fā)動(dòng)畫(huà)
添加一點(diǎn)js
$('.trigger').on('click',function(){
$(this).toggleClass('clicked');
});
再改變一下css
.trigger.clicked .box {
transform: translate(200px, 150px) rotate(20deg);
}
這樣就是通過(guò)改變class來(lái)觸發(fā)transition的動(dòng)畫(huà)毒坛，當(dāng).trigger被點(diǎn)擊的時(shí)候望伦，給.box一個(gè)class：clicked，這個(gè)新的class會(huì)讓box的transform屬性發(fā)生變化煎殷，從而觸發(fā)動(dòng)畫(huà)屡谐。
*小技巧：在chrome里面還能直接查看速度動(dòng)畫(huà)哦！在chrome里面找到合適的動(dòng)畫(huà)曲線(xiàn)蝌数，還能直接復(fù)制bezier（貝塞爾）曲線(xiàn)到css里面愕掏，非常方便。
