一、css3動畫建立三步走
css3 可以建立動畫，分為以下三個步驟。
1、使用@keyframes規則建立動畫
語法
@keyframes animationname
}
keyframes-selector動畫持續時間的百分比（0%-100%），必需。
css3 @keyframes 規則：示例@keyframes 規則是建立動畫。
@keyframes 規則內指定乙個 css 樣式和動畫將逐步從目前的樣式更改為新的樣式。
@keyframes colam
25%50%
100%
}@-webkit-keyframes colam
25%50%
100%
}
animation
: name duration timing-function delay iteration-count direction fill-mode play-state;
示例
.colorad
"colorad"
>
<
/div>
要實現複雜多變的動畫，必須了解css3動畫的全部屬性。
(1) animation-name:規定了動畫的名稱。
語法
animation-name
: keyframename|none;
animation-duration
: time; //如 5s
(5秒) 或 5000ms（5000毫秒）
語法
animation-timing-function
: value;
linear 動畫從頭到尾的速度是相同的
ease 預設。動畫以低速開始，然後加快，在結束前變慢
ease-in 動畫以低速開始
ease-out 動畫以低速結束
ease-in-out 動畫以低速開始和結束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中自己的值，可能的值是從 0 到 1 的數值
例
animation-timing-function
:cubic-bezier
(0,0,0.58,1)
;}
animation-fill-mode
: none|forwards|backwards|both|initial|inherit
none 預設值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。
forwards 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。
backwards 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 「normal」 或 「alternate」 時）或 to 關鍵幀中的值（當 animation-direction 為 「reverse」 或 「alternate-reverse」 時）。
both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴充套件動畫屬性。
initial 設定該屬性為它的預設值。
inherit 從父元素繼承該屬性。
(5) animation-delay:規定動畫什麼時候開始，預設是 「0」。
語法
animation-delay
: time; //如 3s
(3秒) 或 3000ms（3000毫秒）
time可以為負值，示例：
animation-duration
:5s;
animation-delay
: -2s; //動畫跳過 2 秒進入動畫週期
animation-iteration-count
: value;
animation-direction
: normal|reverse|alternate|alternate-reverse|initial|inherit;
(8) animation-play-state:規定動畫是否正在執行或暫停，預設是 「running」。
語法
animation-play-state
: paused|running;
paused 指定暫停動畫
running 指定正在執行的動畫
示例
colorad
colorad
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...
CSS 3動畫介紹
原文 a beginner s introduction to css animation 譯文 乙個初學者對css動畫的介紹 譯者 dwqs 在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...