Flip Multiple Images one after another after some Delay

Question

In my website, I want to create a CSS animation where I am trying to flip multiple images one after another after 1sec delay, but it's not working. When the first images flips then second image should flip then thrid and so on

Like this but onload, Each image should flip one after another. Suppose there are 4 Images 1st image flips with delay:0 then second image flips with delay:1 an so on till fourth Image with delay:4

javascript

document.addEventListener("DOMContentLoaded", function() {
    var rotateComplete = function() {
    with(target.style) {
      webkitAnimationName = MozAnimationName = msAnimationName = "";
    }
    target.appendChild(arr[0]);
    setTimeout(function(el) {
      with(el.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
      }
    }, 0, target);
  };

  var target = document.getElementById("rotator2");
  var arr = target.getElementsByTagName("a");

  target.addEventListener("webkitAnimationEnd", rotateComplete, false);
  target.addEventListener("animationend", rotateComplete, false);
  target.addEventListener("MSAnimationEnd", rotateComplete, false);

}, false);

#stage2 {
  margin: 2em auto 1em 50%;
  height: 240px;
  -webkit-perspective: 1200px;
  -webkit-perspective-origin: 0 50%;
  -moz-perspective: 1200px;
  -moz-perspective-origin: 0 50%;
  -ms-perspective: 1200px;
  -ms-perspective-origin: 0 50%;
}

#rotator2 a {
  position: absolute;
  left: -151px;
  -moz-transform-style: preserve-3d;
}

#rotator2 a img {
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

#rotator2 a:nth-child(1) img {
  -webkit-transform: rotateY(-120deg) translateZ(80px);
  -moz-transform: rotateY(-120deg) translateZ(80px);
  -ms-transform: rotateY(-120deg) translateZ(80px);
}

#rotator2 a:nth-child(2) img {
  -webkit-transform: translateZ(80px);
  -moz-transform: translateZ(80px);
  -ms-transform: translateZ(80px);
}

#rotator2 a:nth-child(3) img {
  -webkit-transform: rotateY(120deg) translateZ(80px);
  -moz-transform: rotateY(120deg) translateZ(80px);
  -ms-transform: rotateY(120deg) translateZ(80px);
}

#rotator2 a:nth-child(n+4) {
  display: none;
}

@-webkit-keyframes rotator2 {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-120deg);
  }
}

@-moz-keyframes rotator2 {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-120deg);
  }
}

@-ms-keyframes rotator2 {
  from {
    -ms-transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(-120deg);
  }
}

#rotator2 {
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform-style: preserve-3d;
  -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
  -moz-animation-duration: 2s;
  -moz-animation-delay: 1s;
  -ms-transform-origin: 0 0;
  -ms-transform-style: preserve-3d;
  -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
  -ms-animation-duration: 2s;
  -ms-animation-delay: 1s;
}

#rotator2:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
}

Here the 1st image is continuously fliping

Mosh Feu · Accepted Answer

If I understand you correctly, as I said, you can use animation-delay. The value will be

(card index) * animation-duration.





  
  




  Card Flip with Text
  Hover over the image below:

  
    
      
        
          
        
        
          John Doe
          Architect & Engineer
          We love that guy
        
      
    
    
      
        
          
        
        
          John Doe
          Architect & Engineer
          We love that guy
        
      
    
    
      
        
          
        
        
          John Doe
          Architect & Engineer
          We love that guy
        
      
    
    
      
        
          
        
        
          John Doe
          Architect & Engineer
          We love that guy

Update

To run it infinite, the animation should calculated differently because it should take care for the back animation.

The calculation is

0.3s (flip animation) * 5 (4 cards + 1 more for delay between iteration) * 2 (back and forth) = 3s.

So each "tick" is 10%. We want to flip it back just in the middle of the animation so it 50%. More 10% for the back animation tick.

Here is the lifecycle:

|---|---|---|---|---|---|---|---|---|---|

|___|___|___|___|___|___|___|___|___|___|
Front w   w   w   w  Back w   w   w   w
 .3s .3s .3s .3s .3s .3s .3s .3s .3s .3s 
|_______________________________________|
                   3s

Flip Multiple Images one after another after some Delay

Answers (2)

Related Questions