一、animation的語法
1、@keyframes——插入關鍵幀
(1)formto形式：
css code複製內容到剪貼簿
(2)百分比的形式：
css code複製內容到剪貼簿
2、animation-name——定義動畫的名稱
animation-name: none | 「動畫的名稱」;
(1)動畫的名稱是由keyframes建立的動畫名，這裡必須和建立的動畫名保持一致。如果不一致,將不能實現任何動畫效果
(2)none為預設值，當值為none時，將沒有任何動畫效果
3、animation-duration
animation-duration: time (s)
animation-duration是指定元素**動畫所持續的時間，取值為數值，單位為秒(s)，其預設值為「0」。
4、animation-timing-function
animation-timing-function:ease(緩衝) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速後減速) || linear(勻速) || cubic-bezier(自定義乙個時間曲線)
animation-timing-function是用來指定動畫的**方式，具有以下六種變換方式：ease(緩衝);ease-in(加速);ease-out(減速);ease-in-out(先加速後減速);linear(勻速);cubic-bezier(自定義乙個時間曲線)。
5、animation-delay
animation-delay: time(s)
animation-delay:是用來指定元素動畫開始時間。取值為數值，單位為秒(s)，其預設值為「0」。這個屬性和animation-duration使用方法是一樣的。
6、animation-iteration-count
animation-iteration-count:infinite || number
animation-iteration-count是指定元素**動畫的迴圈次數，其取值為數字，預設值為「1」或者infinite(無限次數迴圈)。
7、animation-direction
animation-direction: normal || alternate
animation-direction是指定元素動畫**的方向，如果是normal，那麼動畫的每次迴圈都是向前**;如果是alternate，那麼動畫**在第偶數次向前**，第奇數次向反方向**。
8、animation-play-state
animation-play-state:running || paused
animation-play-state主要是用來控制元素動畫的**狀態。其主要有兩個值，running和paused，其中running為預設值。這個屬性目前很少核心支援，所以只是稍微提一下。
二、animation事件介面
其實目前基本的就是三個事件而已：ccioaec開始、迭代、結束。開始和結束都知道是什麼意思。至於這個迭代，由於animation中有個iteration-count屬性，它可以定義動畫重複的次數，因此動畫會有許多次開始和結束。但是真正的「開始」和「結束」事件是關於整個動畫的，他們只會觸發一次，而中間由於重複動畫引起的「結束並開始下一次」將觸發整個「迭代」事件。
這三個事件的標準名稱是：
開始：animationstart
迭代：animationiteration
結束：animationend
但是目前版本的chrome需要加上webkit字首，而且還要注意大小寫
開始：webkitanimationstart
迭代：webkitanimationiteration
結束：webkitanimationend
最後是例項**和截圖
css code複製內容到剪貼簿
本文標題: css的animation屬性使用例項講解
本文位址:
認識CSS之animation屬性
1.animation 屬性是乙個簡寫屬性，用於設定六個動畫屬性 animation name animation duration animation timing function animation delay animation iteration count animation direc...
css 動畫 animation 單屬性
doctype html html head meta charset utf 8 title title style type text css 配置屬性 1.animation name donghua 動畫名稱 2.animation duration 4s 動畫時間 3.animation ...
css屬性之幀動畫屬性（animation）
在介紹animation屬性之前，先來認識一下 keyframes規則。通過 keyframes規則可以建立動畫，建立動畫是逐步改變乙個css樣式到另乙個css樣式來實現的，css樣式可以設定多個來實現動畫過程，指定動畫變化時用 或者用關鍵字從 from 到 to 這是和 0 開始到 100 結束相...