動畫（animation）是css3中具有顛覆性的特徵之一，可通過設定多個節點來控制乙個或一組動畫。常用來實現複雜的動畫效果。
定義動畫：使用@keyframes定義動畫
語法：
@keyframes 動畫名稱
100%
}
div描述@keyframes
定義動畫
animation
所有動畫屬性的簡寫屬性，除了animation-play-state屬性
animation-name
定義@keyframes動畫的名稱，必填
animation-duration
規定動畫完成乙個週期所花費的秒或毫秒，預設0，必填
animation-timing-function
規定動畫的速度曲線，預設ease
animation-delay
規定動畫何時開始，預設0立刻開始
animation-iteration-count
animation-direction
animation-play-state
規定動畫是否在執行或暫停，預設是running還有pause
animation-fill-mode
規定動畫結束後狀態，保持forwards，回到起始backwards
動畫簡寫屬性
案例1：實現波紋效果
基本思路：如下圖所示一張上有8個不同狀態的大熊，每個大熊的寬度大約是160px，我們定義乙個寬為160px的div盒子，然後把這個作為盒子的背景，然後通過動畫控制背景的位置，每次向左移動乙個大熊的的位置，所以8個大熊（背景的總寬度）分為8次移動結束。這裡需要制定animation-timing-function的屬性為steps(8)，這樣連續起來就像大熊在奔跑一樣。然後我們再定義一組盒子移動的動畫。讓盒子從左邊移動到右邊。多組動畫用逗號分隔。
HTML CSS動畫效果
1 transition property 設定過渡的屬性，比如 width height background color 2 transition duration 設定過渡的時間，比如 1s 500ms 3 transition timing function 設定過渡的運動方式，常用有 li...
Html CSS動畫效果個人練習（16）
html源 四月是你的謊言 div item desc 我在盛開的櫻花下遇見你，從此命運不再屬於自己。言葉之庭 div item desc 每晚臨睡前 每天睜開眼的瞬間 不知不覺 我都在祈盼雨天 祈盼雨天 祈盼和那個人 再次相會 你的名字 div item desc 黃昏，不是白晝亦不是夜晚，是我努...
純html css製作3D立方體和動畫效果
今天放上來的，是乙個用css3製作的立方體 動畫，效果如下。整個效果都只用了html和css，沒有一句js，其實起初是使用了js來給六個面的小方格們賦值，後來強迫症犯了，直接手動寫上吧，這樣一句js都沒有，更乾脆利落點。如下為body內整體結構，乙個類名為big的盒子內，放置六個ul，每個ul賦予不...