transition

支持：IE10+

img{transition: 1s 1s height ease; }

transition-property: 屬性
transition-duration: 持續(xù)時(shí)間
transition-delay: 延遲
transition-timing-function: 變化函數(shù)

　　　　　　　　　　-?linear cubic-bezier(0,0,1,1)
　　　　　　　　　　- ease cubic-bezier(0.25,0.1,0.25,1)
　　　　　　　　　　- ease-in cubic-bezier(0.42,0,1,1)
　　　　　　　　　　- ease-out cubic-bezier(0,0,0.58,1)
　　　　　　　　　　- ease-in-out cubic-bezier(0.42,0,0.58,1)
　　　　　　　　　　- cubic-bezier(n,n,n,n) 自定義貝塞爾函數(shù)

無效的屬性：display，background: url(foo.jpg)

不能重復(fù)執(zhí)行，除非重復(fù)觸發(fā)事件

animation

支持：IE10+

div:hover {
? animation: 1s 1s rainbow linear 3 forwards normal;
}
@keyframes rainbow {
? 0% { background: #c00; }
? 50% { background: orange; }
? 100% { background: yellowgreen; }
}

animation-name: 對(duì)應(yīng)keyframes的名稱
animation-duration：持續(xù)時(shí)間
animation-timing-function：變化函數(shù)

　　　　　　　　　　-?linear cubic-bezier(0,0,1,1)
　　　　　　　　　　- ease cubic-bezier(0.25,0.1,0.25,1)
　　　　　　　　　　- ease-in cubic-bezier(0.42,0,1,1)
　　　　　　　　　　- ease-out cubic-bezier(0,0,0.58,1)
　　　　　　　　　　- ease-in-out cubic-bezier(0.42,0,0.58,1)
　　　　　　　　　　- cubic-bezier(n,n,n,n) 自定義貝塞爾函數(shù)

　　　　　　　　　　- step函數(shù)

　　　　　　　　　　　　　　- 步幅：大于零的整數(shù)

　　　　　　　　　　　　　　- 對(duì)齊：指定step函數(shù)是左對(duì)齊連續(xù)函數(shù)，還是右對(duì)齊連續(xù)函數(shù)。

　　　　　　　　　　　　　　　　　　start：對(duì)齊開始，第一幀發(fā)生在動(dòng)畫開始時(shí)，end：對(duì)齊結(jié)束，最后一幀發(fā)生在動(dòng)畫結(jié)束時(shí)。可選項(xiàng)。

　　　　　　　　　　　　　　　　　　一個(gè)step函數(shù)的例子： http://dabblet.com/gist/1745856

div:hover {animation: 1s rainbow infinite steps(10); }

animation-delay：延遲
animation-iteration-count：執(zhí)行次數(shù)
animation-fill-mode：填充模式。決定一次動(dòng)畫播放完成之后是回到起始狀態(tài)還是停留在結(jié)束狀態(tài)

　　　　　　　　　　- none 回到最初的狀態(tài)
　　　　　　　　　　- forwards 表示動(dòng)畫結(jié)束后，元素就是當(dāng)前動(dòng)畫結(jié)束時(shí)候的狀態(tài)。對(duì)應(yīng)keyframe中的"to"或"100%"幀。
　　　　　　　　　　- backwards 表示動(dòng)畫開始之前，元素處于keyframe是"from"或"0%"關(guān)鍵幀的狀態(tài)。
　　　　　　　　　　- both

animation-direction：執(zhí)行方向

　　　　　　　　　　- normal? 0->1, 0->1, 0->1? 正常播放
　　　　　　　　　　- alternate? 0->1, 1->0, 0->1? 正常播放，倒帶播放
　　　　　　　　　　- reverse? 1->0, 1->0, 1->0? 倒帶播放
　　　　　　　　　　- alternate-reverse? 1->0, 0->1, 1->0? 倒帶播放，正常播放

animation-play-state：播放狀態(tài)，可以用js控制

　　　　　　　　　　- paused 動(dòng)畫暫停
　　　　　　　　　　- running 動(dòng)畫播放中

?

keyframes中，from=0%，to=100%

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/tjyuanpeng/p/3568747.html

總結(jié)

以上是生活随笔為你收集整理的css transition animation的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。