在css3中使元素從一種樣式逐漸變化為另一種樣式的效果被稱作為動畫。
1.@keyframes 規則是建立動畫。
2.@keyframes 規則內指定乙個 css 樣式逐步從目前的樣式更改為新的樣式。
@keyframes move
to/* 也可以百分比來規定改變發生的時間，"from" 和 "to"等價於0%和100%，0%是動畫的開始時間，100%是結束時間 */
}
div
animation-name
: 規定 @keyframes 動畫的名稱
animation-duration
: 規定動畫完成乙個週期所花費的秒或毫秒,預設是 0
animation-timing-function
: 規定動畫的速度曲線，預設是 "ease"
animation-delay
: 規定動畫何時開始，預設是 0
animation-iteration-count
animation-direction
animation-play-state
: 規定動畫是否正在執行或暫停，預設是 "running"。
要實現這一點，必須規定兩項內容：指定要新增效果的css屬性；指定效果的持續時間。
不等同於animation，雖然它們都是隨著時間改變元素的屬性值，但是transition（過渡）需要觸發乙個事件才會隨著時間改變其css屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素css屬性，達到一種動畫的效果
1.動畫不需要事件觸發，過渡需要。
2.過渡只有一組（兩個：開始-結束） 關鍵幀，動畫可以設定多個。
1.transition：簡寫屬性，用於在乙個屬性中設定四個過渡屬性。
2.transition-property：規定應用過渡的 css 屬性的名稱。
3.transition-duration：定義過渡效果花費的時間。預設是 0。
4.transition-timing-function：規定過渡效果的時間曲線。預設是 「ease」。
5.transition-delay：規定過渡效果何時開始（延遲）。預設是 0。
注：transition中的過渡效果花費的時間和延遲時間都是以秒或毫秒計。
CSS3過渡和動畫
此文首發於 lijing0906.github.io 智慧型運維,圓球一直勻速旋轉。html id testpage class topbar class ball src css3anitran 0.png alt srcset div class bottombar src css3anitra...
css3過渡和動畫
css3裡面新增屬性 transition animation 等等，方便了前端小夥伴們做動畫。不用再用js寫長長的一大串，效果還不好！這是對我等菜鳥來說，大神們怎麼著都可以，唉！用 來實現動畫，其實就是不同時間，元素有不同的狀態。而這裡面有個很好用的2d轉換屬性 transform，廣大瀏覽器的支...
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...