css之animition動畫幀
阿新 • • 發佈：2019-01-02
一.程式碼示例及使用方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動畫幀animation</title> 6 <style type="text/css"> 7 #box{ 8 width: 500px; 9 height: 500px; 10 border: 4px solid red; 11 margin: 100px auto; 12 position: relative; 13 } 14 #box div{ 15 width: 100px; 16 height: 100px; 17 background: gray; 18 position: absolute; 19 left: 0; 20 top: 0; 21 /*動畫幀呼叫*/ 22 animation:1s 2s 乾坤大挪移 cubic-bezier(0.600, -0.600, 0.525, 1.650) 23 infinite; 24 } 25 /*動畫幀定義*/ 26 @keyframes 乾坤大挪移{ 27 0%{ 28 left: 0; 29 } 30 25%{ 31 left: 400px; 32 top: 0; 33 } 34 50%{ 35 left: 400px; 36 top: 400px; 37 } 38 75%{ 39 left: 0; 40 top: 400px; 41 } 42 100%{ 43 left: 0; 44 top: 0; 45 } 46 } 47 </style> 48 </head> 49 <body> 50 <div id="box"> 51 <div></div> 52 </div> 53 <!-- 54 animation使用格式 55 首先定義一套關鍵幀 56 格式: 57 @keyframes 動畫名稱{ 58 0%{ 59 相應樣式 60 } 61 25%{ 62 相應樣式 63 } 64 50%{ 65 相應樣式 66 } 67 100%{ 68 相應樣式 69 } 70 } 71 然後呼叫 動畫名稱 72 格式: 73 例如:animation:1s 2s 動畫名稱 運動方式 動畫執行次數 74 第一個值:運動的總時間 75 第二個值:運動的延遲時間 76 第三個值:動畫名稱 77 第四個值:運動方式 78 linear 勻速 79 ease 慢速開始,然後慢慢變快 80 ease-in 慢速開始 81 ease-out 慢速結束 82 ease-in-out 開始和結束都滿 83 cubic-bezier(1,0,1,0) 貝瑟爾曲線 84 貝瑟爾曲線工具: 85 http://xuanfengge.com/easeing/ceaser/ 86 第五個值:動畫執行的次數 87 可以是具體的數值,無限次--infinite 88 --> 89 </body> 90 </html>
溫馨小提示:transform也可以移動,但是做不到二次移動,且不可無限移動,這就是二者區別