動畫（animation） 是css中具有顛覆性的特徵之一，可以通過設定多個節點來精確控制乙個， 或一組動畫
常用來實現複雜的動畫效果。
製作動畫分為兩步：
先定義動畫
再使用（呼叫）動畫
用keyfames定義動畫（類似定義類選擇器）
@keyframes 動畫名稱
100%
}
"en">
動畫序列
1. 0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。
2. 在@keyframes中規定某項css樣式，就能建立由當前未央市住建改為新樣式的動畫效果。
3. 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
"en">
動畫序列案例命令：
"en">
2. 元素使用動畫
divdocument
屬性 描述
@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
動畫屬性命令：
"en">
3. 動畫簡寫屬性
animation: myfirst 5s linear 2s infinite alternate;
簡寫屬性裡面不包含 animation-play-state
暫停動畫 ： animation-play-state: puased; 經過和滑鼠經過等其他配合使用
想要動畫走回來， 而不是直接跳回來： animation-direction ： alternate
盒子動畫結束後，停在結束位置 ： animation-fill-mode ： forwards
動畫簡寫屬性：
"en">
做乙個地圖熱點圖：
命令演示：
"map">
"city">
"dotted">
"pulse1">
"pulse2">
"pulse3">
"city tb">
"dotted">
"pulse1">
"pulse2">
"pulse3">
"city gz">
"dotted">
"pulse1">
"pulse2">
"pulse3">
4. 速度曲線細節
animation-timing-function ： 規定動畫的速度曲線，預設是「ease」linear
動畫從頭到尾的速度是相同的。勻速
ease
預設。 動畫以低速開始，然後加快，在結束前變慢。
ease-in
動畫以低速開始。
ease-out
動畫以低速結束。
ease-in-out
動畫以低速開始和結束。
steps（）
指定了時間函式中的間隔數量（步長）
速度曲線步長命令：
!doctype html>
速度曲線步
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...
CSS3中的動畫
一.css3變形 css3變形是一些效果的集合 如平移 旋轉 縮放 傾斜效果 每個效果都可以稱為變形 transform 它們可以分別操控元素發生平移 旋轉 縮放 傾斜等變化 二.css3位移 translate style type text css li a hover style 三.css3...
CSS3中的animation動畫
animation實現乙個屬性值得動畫 背景變換 滑鼠經過 總結 而他的幀集合也需要寫核心字首，就會有四個不同的 webkit keyfranmes moz keyfranmes ms keyfranmes o keyfranmes.然後，hover模式中每乙個帶著animation的屬性前也要加核...