[分享]css3动画鼠标放上去停止

CSS3动画鼠标放上去停止在网页设计中，CSS3动画可以为网页增添生动感和活力。然而有些时候，我们希望鼠标放上去时动画能够停止，这时我们可以使用CSS3的:hover伪类和animationplays...

CSS3动画鼠标放上去停止

在网页设计中，CSS3动画可以为网页增添生动感和活力。然而有些时候，我们希望鼠标放上去时动画能够停止，这时我们可以使用CSS3的:hover伪类和animation-play-state属性。

代码示例：
.anim {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

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

@keyframes slide {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 100px;
  }
} 

在上面的代码中，我们定义了一个名为.anim的class，并将其应用在一个元素上。我们为该元素定义了一个名为slide的关键帧动画，用于让元素左右移动。在该动画中，我们定义了动画的持续时间、重复次数、方向和缓动函数。我们还使用了animation-play-state属性来控制动画的播放状态。当鼠标放到该元素上时，我们将其:hover伪类下的animation-play-state属性设为paused，从而暂停动画。

如此一来，每当鼠标放到该元素上时，动画就会暂停，等到鼠标离开时，动画又会继续播放。这样就实现了鼠标放上去停止动画的效果。