Content Slider: Try creating delay & animation entrance on the slide

General Discussions
#1

Need simple slider with animation & delay like “Slider Revolution” or “Smart Slider 3 Pro”.

So using Content Slider, I apply entrance animation:
(.run1 is class in the slide content)

.run1 {
	animation: rollin-r 1s ease-out both;
}

@keyframes rollin-r {
  0% {
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

But it only animate once when page loaded. It not re-animate when the slide viewed again.

#2

CSS animation iteration count maybe?

In your case, something like:
animation: rollin-r 1s ease-out infinite both;

#3

Thanks for giving me idea.
Unfortunately if leave the website for quite long, the slider and animation timing become mismatch.

I need to find ways to bind the animation to the slider timing.