css3利用animation关键帧动画实现轮播图

1、原理说明：

见视频：168-关键帧动画-轮播案例_哔哩哔哩_bilibili

（前3:44分钟）

文字说明：一个盒子里放里一个长条的盒子放很多小盒子，小盒子里面放的是图片，然后让这个小盒子浮动起来，轮播就是让长条盒子动。

思路：让最外面盒子固定的宽度和高度，这个盒子就是为了显示图片的轮播效果的，所以让图片的盒子宽度和高度和最外面盒子的宽高一样，让里面的长条盒子宽度无限大，为了放下浮动的所有图片，现在就是因为长条盒子里的图片很多，宽度超过了最外面那个盒子，所以对于最外面的盒子存在内容溢出的效果，这时候用overflow：hidden溢出隐藏的效果，刚好显示在最外面盒子里的就是一张图片的大小（因为我们刚开始设置装图片的那个小盒子的宽高=最外面盒子的宽高），这时候就让长条盒子移动就可以实现图片的轮播。。

2、代码：

结果：见下面视频链接

最后一张到第一张图中间会出现瞬间跳转_腾讯视频

最终的结果，可以实现轮播的效果，但是存在轮播完最后一张图的时候，直接就用最后一张跳到第一张结束，我们想要的是最后一张轮播完，再回到第一张开始，缓慢的过渡，所以我们要在最后一张图片后面加上第一张图片，这样当轮播的最后一张就是刚开始的第一张，这样相同图片的跳转就看不出来，就可以了。

✍改善后的效果：

改动过的代码（其他的和上面一样，都不变）

结果：见下面视频链接

第一次改善能实现轮播_腾讯视频

但是上面结果还是中间不停的轮播，我们看到的轮播图都是，第一张图轮播后暂停几秒再下一张图，实现这样的效果用到属性：

✍改善后的效果：

改过的部分代码：

这个代码的思路是，先说下面这部分代码，就是多添加几个关键帧，让0-5%轮播，然后5%-25%之间停在那个位置，也就是那张图停在那里一会儿，然后25%-30%在下一张图，然后后面的30%-50%再停在这张图上，也就是我们一般看到的轮播图的效果，先轮播然后停一下再轮播下一张。如果要实现鼠标放在一张图上，那张图就停止，不再轮播了，就看“1”部分的代码。

图示结果：见下面视频链接

实现轮播到每个视频可以暂停几秒_腾讯视频