CSS3逐帧动画与补帧动画实现图片轮播效果

CSS3 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

语法：
​​​animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*​​​ 默认值：看每个独立属性
适用于：所有元素，包含伪对象:after和:before
继承性：无
相关属性：[ animation-play-state ]

取值：
[ animation-name ]：检索或设置对象所应用的动画名称
[ animation-duration ]：检索或设置对象动画的持续时间
[ animation-timing-function ]：检索或设置对象动画的过渡类型
[ animation-delay ]：检索或设置对象动画延迟的时间
[ animation-iteration-count ]：检索或设置对象动画的循环次数
[ animation-direction ]：检索或设置对象动画在循环中是否反向运动

复合属性。检索或设置对象所应用的动画特效。如果提供多组属性值，以逗号进行分隔。对应的脚本特性为animation。

效果

录制GIF帧率受限，实际效果以真机环境运行为主

代码实现

* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
body,
html {
  width: 100%;
  height: 100%;
  display: flex;
}
:root {
  --w: 500; /* 动画移动宽度 */
  --speed: 2s; /* 动画时长 */
}
.g-container {
  width: 500px; /* 图片显示宽度 */
  margin: auto;
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
}
ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
ul {
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  white-space: nowrap;
  cursor: pointer;
  animation: move1 calc(var(--speed)) infinite;
}
@keyframes move {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}
@keyframes move1 {
  0% {
    transform: translate(0, 0px);
  }
  80%,
  100% {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

<div class="g-container">
  <!--“5”项数-->
  <ul style="--s: 5">
    <li>
      <img src="imgs/1.jpg">
    </li>
    <li>
      <img src="imgs/2.jpg">
    </li>
    <li>
      <img src="imgs/3.jpg">
    </li>
    <li>
      <img src="imgs/4.jpg">
    </li>
    <li>
      <img src="imgs/5.jpg">
    </li>
    <!--末尾补一个首尾数据-->
    <li>
      <img src="imgs/1.jpg">
    </li>
  </ul>
</div>