css動畫學習總結

css 動畫（animation），簡單，炫酷。

動畫，就是讓靜止的物體動起來。那麼就會有起始位置，結束位置（可能還有過程位置），動的過程（效果），動完執行什麼操做，如何隱藏這個時間點不須要的元素，元素重用等問題的出現。

 

如何用最基本的方式定義一個動畫？而且如何用一個動畫？

過程：

1.首先定義起始、（過程）、結束位置，關鍵字@keyframes+name

@keyframes drive {

0% { transform: translateX(0); } //動畫初始位置

100% { transform: translateX(400px); } //動畫結束位置右移400px

}

2.用動畫

.car {

animation-name: drive;

animation-duration:1s;

}

用動畫的時候，就須要動畫animation的各類屬性名字了。

經常使用的有 animation-name  ：用哪一個動畫

            animation-duration：動畫持續時間

            。。。

好了，如此簡單的，一個動畫就作好了。能夠在.car{}中添加小車的樣式，這樣就會出現一個會動的小車。

 

so，來講說稍微高級的東西吧。

animation-timing-function：動畫效果

animation-iteration-count：動畫會重播次數。

說說animation-timing-function：（讓動畫看起來更舒服）主要屬性：ease（默認）、linear、ease-out、ease-in、ease-in-out。

linear：

ease-in：

ease-out（ease-in反過來）：

 

貝塞爾曲線

animation-delay：延時

animation-fill-mode ：動畫結束時候的位置

屬性值有：none，forward，backforward，both

animation-direction： 動畫的方向

normal（直接播放幀，從0-100%）

reverse：（100%-0）

alternate：（0-100%，100%-0，。。。）

alternate-reverse：（100%-0,0-100%，。。。）

 

簡寫animation屬性

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>

 

steps：讓雪碧圖動起來（各個時期動畫圖片組合的雪碧圖）

 

animation-play-state 啓動（中止）動畫，與hover連着用

.sticker { animation: spin 10s linear infinite; animation-play-state: paused; }

.sticker:hover { animation-play-state: running; }

 

css3 比 js快，但兼容性還不行。