如果您想停止正在运行的CSS动画,可以使用animation-play-state: paused;方法来暂停。
实例源码
<!doctype html> <html> <head> <meta set="utf-8"> <title>暂停正在运行的css动画</title> <style> .play-state { width: 100px; height: 100px; margin: 40px; text-align: center; line-height: 94px; border: 3px solid #e1efde; border-radius: 50%; animation: play-state 3s linear infinite; cursor: pointer; } .play-state:hover { animation-play-state: paused; } @keyframes play-state { 0% { margin-left: 0; } 100% { margin-left: 200px; } } </style> </head> <body> <div class="play-state"> 暂停 </div> </body> </html>