CODEWITHSUNDEEP
csscarouselinfinite-loop
fana it
fana it

Reputation: 63

adding infinite loop to carousel css3

totally newbie question - trying to add an infinite loop to a forked carousel with this instruction to my css code : 

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

...but not working at all.

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;

}

I'd appreciate any help. Txs a lot.

forked code is here.

Upvotes: 1

Views: 981

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

You should animate the .carousel element. Each slide movement, the .carousel element is get rotated by some degree. In order to animate this, you need to change the rotate value in keyframes. 

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

CODEPEN

Upvotes: 1

Related Questions