CSS(五)：動畫

• animation-name

動畫名稱
語法：animation-name：none|
元素所定義的動畫名稱，必須與規則@keyframes搭配使用，因為動畫名稱由@keyframes定義。

 

• @keyframes

語法：
@keyframes {
[from|to|]{sRules}[,*]
}
被稱為關鍵幀，其類似於Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，後面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

<span style="color: #008080;">1</span> <span style="color: #000000;">/*定义一个名为"fromLeftToRight"的向右移动的动画*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">@keyframes fromLeftToRight{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    from{margin:0;}
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    to{margin:100px;}
</span><span style="color: #008080;">5</span> }

• animation-duration

設定動畫的持續時間
語法：animation-duration:[,]*

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并持续一秒时间*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> }

• animation-timing-function

動畫的過渡速度類型
語法：animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，持续一秒时间，并且过渡类型为ease-in*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> }

• animation-delay

設定動畫的延遲時間
語法：animation-delay: [,]*

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果，延迟一秒后执行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-delay: 1s;
</span><span style="color: #008080;">7</span> }

• animation-iteration-count

設定動畫的執行次數
語法：animation-iteration-count: infinite|
infinite表示無限次數

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果，执行两次后停止*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 2;
</span><span style="color: #008080;">7</span> }

• animation-direction

設定動畫在循環中是否依照相反順序執行
語法：animation-direction: normal|reverse|alternate|alternate-reverse
說明：
normal：正常方向
reverse：反方向運行
alternate：動畫先正常運行再反正常運行再反方向運行，並持續交替運行
alternate-reverse：動畫先反運行再正方向運行，並持續交替運行

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且反复运行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-direction: alternate;
</span><span style="color: #008080;">8</span> }

• animation-fill-mode

設定動畫開始結束的狀態
語法：animation-fill-mode: none|forwards|backwards|both
說明：
none：預設值。不設定動畫的狀態
forwards：設定物件狀態為動畫結束時的狀態
backwards：設定物件狀態為動畫開始時的狀態
both：設定物件狀態為動畫結束或開始的狀態

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且动画结束后元素位于动画结束时的位置*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 3;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-fill-mode: forwards;
</span><span style="color: #008080;">8</span> }

• animation-play-state

設定動畫的播放狀態
語法：animation-play-state: running|paused

<span style="color: #008080;"> 1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且当div处于hover状态时暂停动画*/
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">div:hover{
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    animation-play-state: paused;
</span><span style="color: #008080;">10</span> }

• animation

動畫的簡寫屬性
語法：
animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [anicountmation-ite-|| [ animation-direction ] || || [ ,*]