CSS Animations是CSS的一個模塊，它定義了如何用關鍵幀來隨時間推移對CSS屬性的值進行影片處理，關鍵幀影片的行為可以通過指定他們的持續時間，它們的重復次數以及它們如何重復來控制，不需要了解任何的JavaScript技術即可完成影片的制作，
Animations由兩部分組成：
（1）css影片的配置
（2）一系列的keyframes（用來描述影片的開始、程序、結束狀態）
通過@keyframes來設定影片序列，序列中每個關鍵幀描述影片元素在影片序列的特定時間內如何渲染，關鍵幀使用了一個百分比來表示在影片序列中出現的時間，0%表示影片的初始時間，也可以通過from關鍵字表示，100%表示影片的結束時間，也可以通過to關鍵字表示，
為了創建一個影片序列，需要對要影片的元素進行修飾，以此來配置影片的次數，持續時間，延遲時間等屬性
●animation-name 影片名字
●animation-duration 影片持續時間
影片完成一個回圈所需的時間長度，
單位s 、ms ,默認值為0s ，
●animation-iteration-count 影片迭代次數
<number> 默認值為1，不能為負數，可以為小數，比如0.5表示播放一半
infinite 無限回圈
●animation-delay 影片延遲執行時間
影片延遲，即元素在加載成功后到影片運行前的時間，
單位為s 、ms ,默認值為0s，即影片加載成功后立刻運行，
例如： animation-delay: 3s;
●animation-direction 影片方向
影片運行完是否交替方向或者是重置起點，
normal 默認值，正常播放
reverse 播放幀的順序反轉，播放的起點為幀的結束
alternate 播放幀的順序交替反轉，即第一次播放從幀的開始播放到幀的結束，第二
次播放就從幀的結束播放到幀的開始，與此同時，速度曲線也交替反轉，
反轉時ease-in交替為ease-out
alternate-reverse 與alternate類似，不過第一次播放時候需要反轉，
●animation-play-state 暫停/恢復
影片的狀態，可以通過JavaScript查詢該屬性以確定該影片目前是運行還是停止，或
者可以通過JavaScript來設定影片的運行狀態，
running 運行狀態
paused 暫停狀態
●animation-fill-mode 填充模式
指定了CSS影片在執行前和執行后如何將樣式應用到它的目標上，
none 不改變默認行為，默認值
forwards 在影片結束后，目標將保留在執行期間所遇到的最后一個關鍵幀所設定的 計算值
backwards 在延遲時間內，目標將保留在執行期間所遇到的第一個關鍵幀所設定的
計算值，
both 向前和向后填充模式都被應用，
●animation-timing-function 影片的速度曲線
ease 默認值，先快后慢
linear 線性增長，勻速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295428.html
標籤：其他