transition

支持：IE10+

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

transition-property: 屬性
transition-duration: 持續時間
transition-delay: 延遲
transition-timing-function: 變化函數

　　　　　　　　　　-?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) 自定義貝塞爾函數

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

不能重復執行，除非重復觸發事件

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: 對應keyframes的名稱
animation-duration：持續時間
animation-timing-function：變化函數

　　　　　　　　　　-?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) 自定義貝塞爾函數

　　　　　　　　　　- step函數

　　　　　　　　　　　　　　- 步幅：大于零的整數

　　　　　　　　　　　　　　- 對齊：指定step函數是左對齊連續函數，還是右對齊連續函數。

　　　　　　　　　　　　　　　　　　start：對齊開始，第一幀發生在動畫開始時，end：對齊結束，最后一幀發生在動畫結束時。可選項。

　　　　　　　　　　　　　　　　　　一個step函數的例子： http://dabblet.com/gist/1745856

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

animation-delay：延遲
animation-iteration-count：執行次數
animation-fill-mode：填充模式。決定一次動畫播放完成之后是回到起始狀態還是停留在結束狀態

　　　　　　　　　　- none 回到最初的狀態
　　　　　　　　　　- forwards 表示動畫結束后，元素就是當前動畫結束時候的狀態。對應keyframe中的"to"或"100%"幀。
　　　　　　　　　　- backwards 表示動畫開始之前，元素處于keyframe是"from"或"0%"關鍵幀的狀態。
　　　　　　　　　　- both

animation-direction：執行方向

　　　　　　　　　　- 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：播放狀態，可以用js控制

　　　　　　　　　　- paused 動畫暫停
　　　　　　　　　　- running 動畫播放中

?

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

?

?

?

?

?

轉載于:https://www.cnblogs.com/tjyuanpeng/p/3568747.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。