相信學習了html的同學對動畫元素一定是不陌生了。
那我們今天就來了解了解動畫元素的一些基本概念：
動畫元素的屬性是：animation
這個動畫元素與我們學習的位移元素又有些相似的地方，但是他們又不盡相同。
那我們就來看看他們的相同點和不同點都有哪些：animation vs transtion（位移）
相同點：都是隨著時間改變屬性。
不同點：transtion需要出發乙個時間，才會隨著時間改變其css屬性。
初始效果 —— 最終的效果之間的變化
而animation在不需要出發任何時間的情況下也可以顯示隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。css的animation就需要明確的動畫屬性值。
初始效果——動畫幀——動畫幀——最終的效果
animation的屬性：
1、animation-name： 必要屬性
檢索或者設定物件所應用的動畫名稱
必須與規則@keyframes配合使用。
定義關鍵幀：
@keyframes name｛
from｛｝to｝
或者@keyframes name
50%{}
100%{}
}2、animation - duration{} 必要的
檢索或者設定物件動畫的持續時間，單位是s或者ms。
3、animation - delay 非必要
檢索或者設定物件動畫延遲的時間。
4animation - timing -function:
動畫過度型別的屬性值
屬性值有「;inear 勻速 ease平滑過度 ease預設值，平滑過去 ease-in 由慢到快
ease=out 由快到慢 ease-in-out 由慢到塊再到慢
step-start 馬上跳到關鍵幀畫滿的最後一幀。
6、animation -direction：normol； 正常方向
reverse 反方向執行
alternate 正常執行再反方向執行，並且持續執行
alternate-reverse 反向執行再正常執行並且持續執行。
設定動畫在迴圈中是否反向執行
8、animation-play-state：running； 運動
paused； 暫停
通過滑鼠控制動畫執行或暫停。
css3 裡的動畫 過渡動畫
1.屬性 transition 需要規定內容 1 指定要新增效果的css屬性 2 指定效果的持續時間。注意 如果未指定的期限，transition將沒有任何效果，因為預設值是0。屬性解釋 transition delay 動畫的延遲 transition delay 1s transition du...
css3設定元素動畫初步
結構 transition animation transform 今天接觸了一點css3中的transition和transform 在這裡寫一下自己的一些記憶點，不知對不對，如果有認知不同之處，請大方的指出，謝謝 css3中提供了一些可以讓元素進行動態的改變，產生一種flash動畫的效果，例如 ...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...