- 1玉转、transition 需要去觸發(fā)比如：點(diǎn)擊事件荚板、鼠標(biāo)移入事件址遇；而 animation 可以配合 @keyframe 可以不觸發(fā)事件就觸發(fā)這個(gè)動(dòng)畫
- 2戴涝、transition 觸發(fā)一次播放一次滋戳；而 animation 則是可以設(shè)置很多的屬性钻蔑，比如循環(huán)次數(shù)，動(dòng)畫結(jié)束的狀態(tài)等等奸鸯；
- 3咪笑、transition關(guān)注的是樣式屬性的變化，屬性值和時(shí)間的關(guān)系是一個(gè)三次貝塞爾曲線娄涩；而animation作用于元素本身而不是樣式屬性窗怒，可以使用關(guān)鍵幀的概念，可以實(shí)現(xiàn)更自由的動(dòng)畫效果钝满；
- 4兜粘、在性能方面：瀏覽器有一個(gè)主線程和排版線程；主線程一般是對(duì) js 運(yùn)行的弯蚜、頁面布局孔轴、生成位圖等等，然后把生成好的位圖傳遞給排版線程碎捺，而排版線程會(huì)通過 GPU 將位圖繪制到頁面上路鹰，也會(huì)向主線程請求位圖等等；我們在用使用 aniamtion 的時(shí)候這樣就可以改變很多屬性收厨，像我們改變了 width晋柱、height、postion 等等這些改變文檔流的屬性的時(shí)候就會(huì)引起诵叁，頁面的回流和重繪雁竞，對(duì)性能影響就比較大，但是我們用 transition 的時(shí)候一般會(huì)結(jié)合 tansfrom 來進(jìn)行旋轉(zhuǎn)和縮放等不會(huì)生成新的位圖拧额，當(dāng)然也就不會(huì)引起頁面的重排了碑诉。
transition
<div class="box"></div>
.box {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #00b3f1;
/* transition: 哪個(gè)屬性動(dòng) 運(yùn)動(dòng)在多長時(shí)間完成 延遲時(shí)間 運(yùn)動(dòng)類型；*/
transition: all .5s linear;
}
.box:hover {
width: 300px;
height: 300px;
}
animation
<div class="box"></div>
.box {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #00b3f1;
animation-duration: 1s; /* 動(dòng)畫時(shí)間 */
animation-name: fillout; /* 通過name使用 */
animation-iteration-count: infinite; /* 循環(huán)次數(shù)侥锦，infinite（無限次循環(huán)） */
}
@keyframes fillout {
from {
width: 200px;
height: 200px;
}
to {
width: 400px;
height: 400px;
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
