一.代码示例及使用方法
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也可以移动,但是做不到二次移动,且不可无限移动,这就是二者区别