1 <!DOCTYPE html> 2 <meta charset="UTF-8"/> 3 <html> 4 5 <head> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background: red; 11 position: relative; 12 animation: myfirst 5s infinite alternate; 13 } 14 15 @keyframes myfirst { 16 0% { 17 background: red; 18 left: 0px; 19 top: 0px; 20 } 21 22 100% { 23 background: blue; 24 left: 200px; 25 top: 0px; 26 } 27 28 } 29 //鼠标划过停止动画效果 30 div:hover{ 31 -webkit-animation-play-state:paused; 32 animation-play-state:paused; 33 } 34 </style> 35 </head> 36 <body> 37 <div></div> 38 </body> 39 40 </html>
原文：https://www.cnblogs.com/520yh/p/11751576.html