css - 将无限循环添加到轮播css3

Question

完全是新手问题 - 尝试使用对我的 CSS 代码的此指令向 fork 轮播添加无限循环:

 animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225)` forwards;

...但根本不起作用。

CSS 提取:

    .item {
  display: block;
  position: absolute;
  background: #000;
  width: auto-flow;
  height: auto-flow;
  /* line-height: 200px; */
  /* font-size: 2em; */
  /* text-align: center; */
  color: #FFF;
  opacity: 0.75;
  border-radius: 20px;

     animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;

如果有任何帮助，我将不胜感激。非常感谢。

fork 代码是 here.

Answer 1

您应该为 .carousel 元素设置动画。每次滑动时，.carousel 元素都会旋转一定程度。为了对此进行动画处理，您需要更改关键帧中的旋转值。

@keyframes carousel{
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(-360deg);
    }
}

CODEPEN