animation-name屬性
1、檢索或者設定物件所應用的動畫的名稱
2、語法： keyframename | none；
3、引數說明：
（1） keyframename – 指定要繫結到選擇器的關鍵幀的名稱
（2）none – 指定有沒有動畫（可用於覆蓋從級聯的動畫）
animation-duration屬性
小結：（1） 對於animation動畫來說，當我們的關鍵幀寫好之後，呼叫關鍵幀的2個東西必須寫。
（2） 乙個是動畫名稱，另乙個是動畫的持續時間。
（3） 動畫名稱也可以理解為：識別符號， 其次就是有時間看動畫！
animation-timing-function屬性
1、檢索或者物件動畫的的過渡型別
2、語法：
（1）ease 平滑過渡 等同於貝賽爾曲線（0.25 0.1 0.25 1.0）開頭和結尾比較平滑，但是最後相對較快！
（2）linear 線性過渡 等同於貝塞爾曲線（0.0 0.0 1.0 1.0） 突然開始，中間勻速，再次突然停止
（3）ease-in 由慢到快
（4）ease-out 由快到慢
（5）ease-in-out 慢-快-慢 建議使用
（6）step-start 一幀一幀設定
（7）step-end
（8）step[start|end]
animation-delay屬性
1、檢索或者設定物件動畫的延遲時間
2、語法：time
3、引數：可選的，定義動畫開始前等待的時間，以s或者ms計算，預設值0
animation-direction屬性
1、檢索或者設定物件中的動畫在迴圈中是否反向運動
2、語法：屬性值如下
（1）normal – 正常方向
（2）reverse – 反方向執行
（3） alternate – 動畫先正常執行再的方向執行，並持續交替
（4）alternate-reverse – 動畫先反向執行再正常執行，並持續交替
（5） initial – normal
（6） inherit – 繼承父元素
animation-iteration-count屬性
1、檢索或設定物件動畫迴圈交替的效果
2、設定迴圈：infinite
alternate和alternate-reverse屬性值配合迴圈設定一起使用，否則失效！
animation-fill-mode屬性
animation-play-state屬性
1、指定動畫是否正在執行或者已經暫停
2、語法：屬性值如下
（1）paused – 指定動畫暫停
（2）running – 預設值 – 指定正在執行的動畫
animation屬性
1、復合屬性，檢索或者設定物件所應用的動畫特效。
2、語法：animation：name duration timing-function delay iteration-count direction fill-mode play-state;
3、animation機制：
（1）優先選擇兩個屬性 – name屬性 – duration屬性
（2） 一般情況下如果只有乙個時間的話，肯定表示duration
（3）如果是兩個時間的話，第乙個是duration 第二個才是delay
1、關鍵幀，可以指定任何順序來排列animation動畫變化的關鍵位置。
2、使用說明：使用@keyframes規則建立動畫，通過逐步改變從乙個css樣式設定到另乙個。
可以通過關鍵幀多次更改css樣式的設定。
3、語法：
@keyframes animationname
}引數說明：
1、animationname -- 必選項，定義動畫名字
2、keyframes-selector -- 必選項，動畫持續的百分比 0-100% form（0%） to（100%）
3、css-styles：必選項，乙個或者多個合法的css樣式屬性
（1）cpu：**處理器 解釋計算機指令以及處理計算機軟體中的資料。
（2） gpu：圖形處理器，專門處理和繪製圖形的相關硬體。gpu是專門執行複雜的數學和幾何計算二設計的。
（3） 硬體加速：在計算機中將非常大量的工作分配給專門的硬體處理，減輕cpu的工作壓力。
（4） will-change：增強頁面的渲染效能。
現狀：css動畫等並不會直接觸發gpu加速，而是使用瀏覽器稍慢的軟體處理渲染引擎
在3d變形有自己的layer層，2d變形不會有的。
代價：不斷占用的ram和gpu的儲存空間。
will-change屬性
1、提前告知瀏覽器元素將要做什麼動畫，讓瀏覽器提前準備合適的優化設定。
2、語法：will-change:屬性值如下：
（1） auto – 自動適應
（2） scroll-position – 將要改變元素的滾動位置
（3） contents – 將要改變元素的內容
（4）custom-ident – 明確指定將要改變的屬性和給定的名稱 --》 will-change:transform;
（5）animateable-feature – 指定動畫的一些特徵值 – 》 will-change: left/top/margin;
3、相容：ie13+ firefox47+ chrome49+ opera39+ ios9.3+ android52+
4、注意點：不要濫用
CSS3學習筆記 動畫
css3中的動畫功能分為transitions功能和animations功能 支援從乙個屬性在指定時間內平滑過渡到另乙個屬性值 transitions功能具有的屬性 1 transition property 哪種屬性平滑過渡 2 tranition duration 在多久時間內完成屬性的平滑過渡...
（2020 10 21）學習css3動畫
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。0 是動畫的開始，100 是動畫的完成。為了得到最佳的瀏覽器支援，您應該始終定義 0 和 100 選擇器。keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性。animation name 規定...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...