[分享]css动画停在当前状态

CSS动画效果可以为网站设计提供一些惊人的效果，但有时候您可能希望CSS动画停留在当前状态而不重新开始。

.anim {
  animation: rotate 2s infinite;
}

.anim:hover {
  animation-play-state: paused;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
} 

在上面的代码示例中，我们创建了一个名为“rotate”的CSS动画，用于将元素旋转一个完整的圆。我们把这个动画应用到一个class名为“anim”的元素，并设置为无限循环。

接下来，我们使用:hover属性使这个动画停留在当前状态。当用户将鼠标悬停在anim元素上时，动画播放状态被暂停。这是通过设置animation-play-state属性为paused来完成的。

最后，我们定义了一个从0到360度的关键帧动画，用于实现顺时针旋转的效果。

以上就是如何让CSS动画停留在当前状态的简单方法。试试看，看看它能为您的网站带来什么不一样的效果吧！