ae图片无缝循环滚动_纯 CSS 实现无缝滚动

前言

在某些场景下，需要在页面中循环滚动地展示一些信息，如商品信息、营销活动图片、系统消息通知等。在以往的开发中，我们一般都会使用 Swipper 或类似的组件来实现，其功能也是十分强大；不过我们今天讨论的仅仅是用一种更轻量的、更简便的甚至无需 JS 的方式来实现一个简单的无缝滚动而已。

何为无缝滚动？

拆开来说，应从右向左理解。在网页中，滚动是指元素在某个方向的位移过程；无缝，指的是元素上一次滚动结束和下一次滚动开始之间是平滑自然、紧密相连的，如同圆环一样首尾相接、不分起点与终点。

以横向滚动的图片为例，其无缝滚动示意图如下所示：

无缝滚动示意图

Step By Step，先实现滚动

实现元素滚动的方法可以使用 JS，如通过setInterval来改变元素的left值。也可以使用 CSS Animation 来实现。另外在 CSS 动画中，我们应尽可能的避免操作元素的width、height、padding、margin等会引起浏览器重排的属性。对于某些动画，我们可适当的使用 CSS Transform 模块的属性，开启 GPU 加速，提升动画流畅度。

animation

animation属性说明如下所示：

<

属性值	说明	可选值	初始值
animation-name	指定动画的名称	---	none
animation-duration	指定动画周期的时长		0s
animation-timing-function	定义动画的运行效果		ease