Question

完全是新手问题 - 尝试使用此指令向我的css代码添加无限循环到分叉轮播：

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

......但根本不工作。

css extract：

    .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;

}

我很感激任何帮助。很多。

分叉代码为here.

Answer 1

您应该为.carousel元素设置动画。每个滑动运动，.carousel元素都会旋转一定程度。要为此设置动画，您需要更改关键帧中的旋转值。

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

<强> CODEPEN

为carousel css3添加无限循环

1 个答案: