向轮播css3添加无限循环

Question

一个完全新手的问题--尝试用下面的指令给我的css代码添加一个无限循环到forked carousel：

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

...but完全不起作用。

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;

}

如果能帮上忙我会很感激的。Txs很多。

派生的代码是here.

Answer 1

您应该使.carousel元素具有动画效果。每次滑动时，.carousel元素都会旋转一定的角度。为了设置动画效果，需要更改关键帧中的旋转值。

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