「@keyframes」關鍵幀：
自定義一些動畫名稱，規定什麼時間做什麼動作。即「
@keyframes
」後面跟著動畫名稱加上一對花括號「」,花括號中是不同時間段樣式。
例如@keyframes changecolor
100%
}animation屬性是乙個簡寫屬性，用於設定八個動畫屬性：
1. animation-name keyframes名稱
2. animation-duration
指定完成動畫所花費的時間，以秒或毫秒計
3. animation-timing-function 指定動畫的速度曲線
4. animation-delay
指定在動畫開始之間的延遲
8. animation-play-state 指定動畫是否正在執行或已暫停
animation-timing-function指定動畫的速度曲線
1.linear 勻速
2.ease 預設，動畫以低速開始，然後加快，在結束前變慢。
3.ease-in 緩慢開始（加速）
4.ease-out 緩慢結束（減速）
5.ease-in-out 緩慢開始，緩慢結束（先加速後減速）
animation-delay 動畫開始之間的延遲
1.單位是秒或毫秒
2.可以是負值，-2秒表示動畫立馬開始，但跳過2秒進入動畫，即前兩秒的動畫不執行，直接跳過前兩秒進入動畫。
預設1次，可以設定2次，3次.......infinite表示無限
animation-direction值
說明normal
reverse
alternate
alternate-reverse
initial
設定該屬性為它的預設值。
inherit
從父元素繼承該屬性。
到的樣式
屬性值 效果
none
預設值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards
表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards
會在向元素應用動畫樣式時迅速應用動畫的初始幀
both
元素動畫同時具有forwards和backwards效果
animation-play-state指定動畫是否正在執行或已暫停
paused 指定暫停動畫
running 指定正在執行的動畫
css3 animation基礎屬性
animation下的屬性 name duration animation timing function 運動方式 animation delay 延遲時間 animation iteration count 迴圈的次數infinite 無限迴圈也可以填寫數字 animation directio...
css3 animation（動畫）屬性
css3 animation 動畫 屬性 1.animation name duration timing function delay iteration count direction fill mode play state 所有屬性集合 2.animation name屬性值 繫結動畫名 k...
CSS3 animation屬性介紹
css3 animation動畫 css3除了transition屬性，還可以使用animation功能實現複雜的動畫效果。要建立animation動畫，先要了解 keyframes規則。css3 keyframes關鍵幀 使用 keyframes建立動畫。在動畫過程中，可以多次改變css的樣式，指...