0921自我總結 CSS3動畫的使用 一.動畫的創建 @keyframes規則是創建動畫 瀏覽器相容 根據狀態的百分比來設置 上面如果有首碼下麵使用的時候必須加上首碼 二.css3動畫的屬性 animation設置動畫 :animation: name duration timing functio ...
0921自我總結
CSS3動畫的使用
一.動畫的創建
@keyframes規則是創建動畫
瀏覽器相容
1、@keyframes myfirst
2、@-webkit-keyframes myfirst /* Safari and Chrome */
3、@-moz-keyframes myfirst /* Firefox */
4、@-o-keyframes myfirst /* Opera */根據狀態的百分比來設置
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始狀態 透明度為0*/
}
50% {
opacity: 0; /*中間狀態 透明度為0*/
}
100% {
opacity: 1; /*結尾狀態 透明度為1*/
}
}上面如果有首碼下麵使用的時候必須加上首碼
二.css3動畫的屬性
animation設置動畫
`語法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name指定的動畫， 從而執行動畫
語法:animation-name: none |動畫名稱
none:為預設值，當值為none 時，將沒有任何動畫效果，其可以用於覆蓋任何動畫。
animation-duration主要用來設置動畫播放所需時間，一般以秒為單位
語法:animation-duration:time
和transition-duration使用方法類似
預設單位為:'s'
0表示沒有動畫效果
animaton-timing- function主要用來設置動畫的播放方式
語法: animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式
他和transition中的transition-timing-function一樣， 具有以下幾種變換方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
animation-delay主要用來指定動畫的延遲時間
語法:animation-delay:time
animation-iteration- count主要用來指定動畫播放的迴圈次數
animation-iteration-count: infinite|time
infinite:為迴圈播放
time:為指定時間預設單位為S
animation-direction主要用來指定動畫的播放方向
參數
| 值 | 描述 |
|---|---|
| normal | 預設值。動畫按正常播放。 |
| reverse | 動畫反向播放。 |
| alternate | 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 |
| alternate-reverse | 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
| initial | 設置該屬性為它的預設值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
animation-play- state主要用來控制動畫的播放狀態
語法:animation-play-state: paused|running;
| 值 | 描述 |
|---|---|
| paused | 指定暫停動畫 |
| running | 指定正在運行的動畫 |
animation-fill- mode主要用來設置動畫的時間外屬性
語法: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 | 設置該屬性為它的預設值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
