㈠動畫屬性
⑴animation-name：指定要綁定到選擇器的關鍵幀的名稱。
⑵animation-duration：定義動畫完成一個周期需要多少秒或毫秒
⑶animation-timing-function：指定動畫將如何完成一個周期。
⑷animation-delay：屬性定義動畫什么時候開始。
⑸animation-iteration-count ：定義動畫應該播放多少次。
⑹animation-direction：定義是否循環交替反向播放動畫。
如果動畫被設置為只播放一次，該屬性將不起作用。
動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性可以重寫該行為。
⑺animation-fill-mode：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
默認情況下，CSS 動畫在第一個關鍵幀播放完之前不會影響元素，在最后一個關鍵幀完成后停止影響元素。animation-fill-mode 屬性可重寫該行為。
forwads表示讓動畫停留在結束狀態，即停留在最后一幀。
⑻animation-play-state：指定動畫是否正在運行或已暫停。
㈡過渡屬性
⑴transition-property：屬性規定應用過渡效果的 CSS 屬性的名稱。（當指定的 CSS 屬性改變時，過渡效果將開始）。
⑵transition-duration：屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。
⑶transition-timing-function：屬性規定過渡效果的速度曲線。
⑷transition-delay：屬性規定過渡效果何時開始。
㈢漸變屬性
⑴repeating-linear-gradient() 函數用於重復線性漸變
⑵shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
⑶linear-gradient() 函數用於創建一個線性漸變的 "圖像"。
語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
㈣復合屬性示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>復合屬性</title> <style> div{ background-image:repeating-linear-gradient(red, yellow 10%, green 20%); width:200px; height:200px; border-radius:50%; animation:dh 6s linear infinite; transition:width 6s linear,height 6s linear } @keyframes dh{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} div:hover{ width:600px; height:600px; } </style> </head> <body> <div></div> </body> </html>
㈤單一屬性示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單一屬性</title> <style> div{ border-radius:50%; background-image:repeating-linear-gradient(red,yellow 10%,green 20%); width:200px; height:200px; animation-name:dh; animation-duration:6s; animation-timing-function：linear; animation-iteration-count:infinite; transition-property:width,height; transition-duration:6s; transition-timing-function:linear; } @keyframes dh{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } div:hover{ width:600px; height:600px; } </style> </head> <body> <div></div> </body> </html>
效果圖：
