css3基礎---animation動畫
關鍵幀@keyframes
語法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必寫項，定義動畫的名稱
keyframes-selector：必寫項，動畫持續時間的百分比
from：0%
to：100%
css-style：css宣告
@keyframes move { from{ transform: translate(-150px,0); } to{ transform: translate(150px,0); } }
animation-delay
定義動畫開始前等待的時間,以秒或毫秒計(屬於動畫外的範疇)
值:
<time>
從動畫樣式應用到元素上到元素開始執行動畫的時間差。該值可用單位為秒(s)和毫秒(ms)。如果未設定單位，定義無效
animation-delay: 2s;
animation-play-state定義了動畫執行的執行和暫停
值
running
當前動畫正在執行。
paused
當前動畫以被停止。
.wrap:hover .inner{ animation-play-state: paused; }
animation-fill-mode屬於動畫外的範疇，定義動畫在動畫外的狀態
backwards：from之前的狀態與form的狀態保持一致 forwards：to之後的狀態與to的狀態保持一致 both：backwards+forwards animation-fill-mode: both;
animation-direction定義了動畫執行的方向
值
normal
每個迴圈內動畫向前迴圈，換言之，每個動畫迴圈結束，動畫重置到起點重新開始，這是預設屬性。
alternate
動畫交替反向執行，反向執行時，動畫按步後退，同時，帶時間功能的函式也反向，比如，ease-in 在反向時成為ease-out。計數取決於開始時是奇數迭代還是偶數迭代
reverse
反向執行動畫，每週期結束動畫由尾到頭執行。
alternate-reverse
反向交替， 反向開始交替
animation-iteration-count定義了動畫執行的次數
定義了動畫執行的次數（屬於動畫內的範疇）
值
infinite
無限迴圈播放動畫.
<number>
動畫播放的次數 不可為負值.
animation-iteration-count: infinite;
animation-timing-function動畫在每一動畫週期中執行的節奏(速率)
linear:線性過渡，等同於貝塞爾曲線（0,0,1,1）
ease:平滑過渡，等同於貝塞爾曲線（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同於貝塞爾曲線（0.42,0,1,1）
ease-out:由快到慢，等同於貝塞爾曲線（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同於貝塞爾曲線（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)
steps(n,[start|end])
傳入一到兩個引數，第一個引數意思是把動畫分成 n 等分，然後動畫就會平均地執行。
第二個引數 start 表示從動畫的開頭開始執行，相反，end 就表示從動畫的結尾開始執行，
預設值為 end。
animation-timing-function: linear;
animation-duration屬性指定一個動畫週期的時長。
預設值為0s，表示無動畫。
值
一個動畫週期的時長，單位為秒(s)或者毫秒(ms)，無單位值無效。
注意：負值無效，瀏覽器會忽略該宣告，但是一些早起的帶字首的宣告會將負值當作0s
animation-duration: 2s;
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrap{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 400px; width: 400px; border: 1px solid; } .inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 100px; width: 100px; background-color: pink; /* 設定動畫名 */ animation-name: move; /* 設定動畫延時時間,屬於動畫外 */ animation-delay: 2s; /* 設定動畫一次所用時間 */ animation-duration: 2s; /* 設定運動速度 */ animation-timing-function: linear; /* 設定動畫次數 */ animation-iteration-count: infinite; /* 設定動畫方向 */ animation-direction: alternate-reverse; /* 設定動畫的執行與暫停 */ animation-play-state: running; /* 定義動畫在動畫外的狀態 */ animation-fill-mode: both; } @keyframes move { from{ transform: translate(-150px,0); } to{ transform: translate(150px,0); } } .wrap:hover .inner{ animation-play-state: paused; } </style> </head> <body> <div class="wrap"> <div class="inner"></div> </div> </body> </html>