動畫animation

1. animation-name（動畫名稱）

元素所應用的動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義

div{    width:100px;
   　　 height:100px;
    　　background:red;
   　　 position:relative;
   　　 animation-name:mymove;
   　　 animation-duration:5s;    
　　}

　　@keyframes mymove
　　{
　　from {left:0px;}
　　to {left:200px;}
　　}

 

2. keyframes(關鍵幀)

被稱為關鍵幀，其類似於Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟着是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

div{   width:100px;
   　　 height:100px;
    　　background:red;
   　　 position:relative;
   　　 animation-name:mymove; 　　 animation-duration:5s; 　　}

@keyframes FromLeftToRight{
   　　 0%{left: 0; }
     100%{ left: 800px; }
}

 

3. animation-duration(動畫時間)

div{
      -webkit-animation-duration:1s;
                  animation-duration:1s/*所需的動畫時間1秒*/

}

4. animation-timing-function（動畫的過渡速度）

linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

div{
      -webkit-animation-timing-function : ease-in;
                    animation-timing-function : ease-in;/*動畫的過渡速度是由慢到快*/
}

 

5. animation-delay(動畫延遲時間)

div{
      animation-delay:2s;/*延遲2秒*/  
}

 

6. animation-iteration-count(動畫執行次數)

infinite：表示無限次數

div
{
    animation-iteration-count:3;/*動畫執行的次數是3次*/
}

 

7. animation-direction(動畫的順序)

屬性值：

normal：正常方向，默認值。

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，並持續交替運行

alternate-reverse：動畫先反運行再正方向運行，並持續交替運行

div{
         　animation-direction : normal; /*正常方向，默認值*/
            animation-direction : reverse; /*反方向運行*/
            animation-direction : alternate; /*動畫先正常運行再反方向運行，並持續交替運行*/
            animation-direction :alternate-reverse; /*動畫先反向運行再正常運行，並持續交替運行*/
}    

 

8. animation-play-state(動畫的狀態)

屬性值：

running：運動

paused：暫停

div:hover{       
    animation-play-state:paused; /*暫停*/
}

9. animation-fill-mode(動畫時間之外的狀態)

none：默認值。不設置對象動畫之外的狀態

forwards：設置對象狀態為動畫結束時的狀態

backwards：設置對象狀態為動畫開始時的狀態

both：設置對象狀態為動畫結束或開始的狀態

div {   
              animation-fill-mode :forwards; /*設置對象狀態為動畫結束時的狀態*/
}

 

10. animation(動畫復合屬性)

語法：

animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]

 

可以將以上屬性縮寫。例如以下代碼：

div{
                 animation: FromLeftToRight  2s ease-out forwards;     
}