animation-play-state用于设置动画的状态，有两个值，paused和running
<style> .box{ width:100px; height: 100px; background-color:orange; border-radius: 50%; text-align: center; line-height: 100px; color: greenyellow; position: absolute; top:0; left: 0; animation: run 2s infinite; } /* 鼠标经过暂停动画 */ .box:hover{ animation-play-state: paused; } @keyframes run { 0%{ left: 0; } 100%{ left:100px; } } </style> </head> <body> <div class="box"></div> </body>