1.動畫的基本使用
2.動畫序列
3.動畫常用屬性
4.動畫屬性簡寫
5.綜合案例
1.動畫的基本使用
動畫是css3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制乙個或一組動畫，常用來實現複雜的動畫效果。
@keyframes move
100%
}.box
style
>
head
>
>
class
="box"
>
div>
body
>
2.動畫序列
可以做多個狀態的變化
@keyframes 動畫名稱
25%50%
75%100%
}
屬性描述
@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」，還有「paused」
animation-fill-mode
規定動畫結束後狀態，保持forwards，回到起始backwards
animation-timing-function 規定動畫的速度曲線，預設是ease ：
steps():搭配 white-space：nowrap、overflow：hidden 實現打字機效果
4.動畫屬性簡寫
animaton：move 2s linear 0s infinite alternate forwardscss基礎（七） 動畫效果
26.rotate 函式指定的角度引數使元素相對原點進行旋轉，設定乙個角度值，指定旋轉的幅度，如果是正值，相對圓點中心順時針，負值相對於圓點中心逆時針 ms transform rotate 7deg ms代表ie核心識別碼 moz transform rotate 7deg moz代表火狐核心識別...
css3 動畫總結
在用css3建立動畫效果之前，首先要先了解下 keyframes 規則 keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。internet explorer 10 firefox 以及 opera 支援 keyfram...
CSS3 動畫效果總結
css3動畫的屬性主要分為三類 transform transition以及animation。transform rotate 設定元素順時針旋轉的角度，用法是 transform rotate x 引數x必須是以deg結尾的角度數或0，可為負數表示反向。scale 設定元素放大或縮小的倍數，用法...