CSS3動畫的使用

0921自我總結

CSS3動畫的使用

一.動畫的建立

@keyframes規則是建立動畫

瀏覽器兼容

一、@keyframes myfirst

二、@-webkit-keyframes myfirst /* Safari and Chrome */

三、@-moz-keyframes myfirst /* Firefox */

四、@-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	動畫在奇數次（一、三、5...）正向播放，在偶數次（二、四、6...）反向播放。
alternate-reverse	動畫在奇數次（一、三、5...）反向播放，在偶數次（二、四、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。