css animation 鼠标移入暂停会抖动

最新推荐文章于 2024-04-26 22:14:41 发布

今晚吃火锅耶

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量756

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44835957/article/details/131658983

版权

在这里插入图片描述
如图实现一个赞助商横向滚动列表墙，
上下两排向右滚动，中间向左滚动，鼠标移入暂停当前行。

实现：

// 使用animation

.moving {
    animation: move 20s linear infinite;
}

@keyframes move {
    0% {
    }
    100% {
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
}
  }


.moving2 {
    animation: move2 20s linear infinite;
    -webkit-animation: move2 20s linear infinite;
}
  @keyframes move2 {
    0% {
}
    100% {
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
        -o-transform: translateX(50%);
}
  }

原来想的是使用addClass 和removeClass进行moving属性添加移除，从而达到鼠标移入暂停的效果，但是实现的时候发现每次鼠标移入，列表图片都会向左右抖动一下，并不美观。

.moving: hover {
	animation: paused; // 同样存在这个问题，但是没之前那么明显了
}

最终解决：

.moving:hover {
    animation-play-state:paused;
}
// 特别流畅，不会出现抖动，效果实现

总结：
css animation-play-state 属性

暂停动画：

animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */



// paused	指定暂停动画	 
// running	指定正在运行的动画

// Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。