1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 500px; 13 height: 500px; 14 background: skyblue; 15 16 } 17 .box1{ 18 width: 100px; 19 height: 100px; 20 background: skyblue; 21 /*transition: 1s;*//*过渡 需要事件触发*/ 22 /*使用animation调用关键帧*/ 23 /*animation:mz 3s;综合写法*/ 24 animation-name: mz2;/*关键帧名字 动画名*/ 25 animation-duration: 2s;/*关键帧时长 总运动时间*/ 26 animation-delay: 3s;/*关键帧延迟时间*/ 27 animation-iteration-count: 2;/*运动执行次数 默认情况一次 infinite无限循环*/ 28 animation-direction: reverse;/*运动方向*/ 29 animation-direction: alternate;/*先正向再反向*/ 30 animation-direction: alternate-reverse; 31 animation-timing-function: ease;/*运动使用的类型*/ 32 animation: mz2 2s 1s linear infinite; 33 34 } 35 .box:hover .box1{ 36 animation-play-state: running;/*鼠标移入暂停*/ 37 } 38 /*定义动画*/ 39 @keyframes mz{ 40 from{margin-left: 0;} 41 to{ 42 margin-left: 500px; 43 } 44 } 45 @keyframes mz2{ 46 0%{/*初始状态*/ 47 margin-left: 0px; 48 margin-bottom: 0px; 49 } 50 25%{ 51 margin-left: 500px; 52 margin-top: 0px; 53 } 54 50%{ 55 margin-left: 500px; 56 margin-top: 400px; 57 } 58 75%{ 59 margin-left: 0px; 60 margin-top: 400px; 61 } 62 100%{ 63 margin-left: 0px; 64 margin-top: 0px; 65 } 66 } 67 </style> 68 </head> 69 <body> 70 <div class="box"> 71 <div class="box1"> 72 </div> 73 </body> 74 </html> 75