CODEWITHSUNDEEP
javascripthtmlcsscss-animationskeyframe
TjOlmsy
TjOlmsy

Reputation: 13

Delayed Flip-Card Transition on Page Load Then Loop

I'm having a bit of brain block here and can't seem to figure this one out at the moment.

I have four flip-cards that flip down vertically on hover, currently. What I'm trying to achieve here is have the flip-cards flip down on page load, one at a time after the other, with no hover, and then once the fourth card has flipped down, reset all, and loop the same set of transitions over again, infinitely.

I'm sure it's some crystal clear answer that my brain is just not comprehending at the moment. I've tinkered around with it so much that I've just reset it back to hover.

P.S. sorry for the CSS mess I kinda let it go in my many attempts to find a solution. Any help is much appreciated!!

Here's the HTML:

<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
    </div>
    <div class="flip-card-back1">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
    </div>
    <div class="flip-card-back2">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card3">
  <div class="flip-card-inner3">
    <div class="flip-card-front3">
    </div>
    <div class="flip-card-back3">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card4">
  <div class="flip-card-inner4">
    <div class="flip-card-front4">
    </div>
    <div class="flip-card-back4">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>

And here's the CSS:

.flip-card1 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner1 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
}


.flip-card1:hover .flip-card-inner1 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front1 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;

}


.flip-card-back1 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


.flip-card2 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner2 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom; 
}


.flip-card2:hover .flip-card-inner2 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front2 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back2 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner3 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;  
}


.flip-card3:hover .flip-card-inner3 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front3 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back3 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


.flip-card4 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner4 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom; 
}


.flip-card4:hover .flip-card-inner4 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front4, .flip-card-back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front4 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back4 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

Here it is in jsfiddle

Upvotes: 1

Views: 865

Answers (2)

Shiv Kumar Baghel
Shiv Kumar Baghel

Reputation: 2480

use setInterval to add class for animation in sequnce and use jquery delay method to remove the same class after time.

use below code snippet for same logic. NOTE : removed all hover selectors. 

$(document).ready(function(){
  var i = 0;
  setInterval(function(){
  
   $(".flip-card-inner"+ i).addClass("hoverit").delay( 1000 - (i*20) ).queue(function(){
      $(this).removeClass("hoverit").dequeue();
   });

  if(i == 4) {
    i = 0;
  }
  i++;
     
  }, 1000);
  
});
.hoverit {
    transform: rotatex(-180deg);
    perspective: 1000px;
}

.flip-card1 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner1 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
}

.flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front1 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back1 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
 
}



/*FLIP-CARD2 ANIMATION*/
.flip-card2 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner2 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;   
}

.flip-card2:hover .flip-card-inner2 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}

.flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front2 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back2 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner3 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
    
}


.flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front3 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back3 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}
/*FLIP-CARD4 ANIMATION*/
.flip-card4 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner4 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;    
}


.flip-card-front4, .flip-card-back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front4 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back4 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
    </div>
    <div class="flip-card-back1">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
    </div>
    <div class="flip-card-back2">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>
    

<div class="flip-card3">
  <div class="flip-card-inner3">
    <div class="flip-card-front3">
    </div>
    <div class="flip-card-back3">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>

    
<div class="flip-card4">
  <div class="flip-card-inner4">
    <div class="flip-card-front4">
    </div>
    <div class="flip-card-back4">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>

Upvotes: 1

Joey Breithaupt
Joey Breithaupt

Reputation: 95

Are you trying to do this with just CSS? If so you could use keyframes to create the 'auto-flip' effect. Here's the updated fiddle, it seems to break the hover state. If you also need the hover state you may need to use JS. Which I can help with as well. Edit: In the fiddle I change the transition origin to center. I just thought it looked better with the animation.

@keyframes flip {
      0% {
        transform: rotatex(0deg)
      }
      25% {
        transform: rotatex(-180deg)
      }
      50% {
        transform: rotatex(0deg)
      }
      100% {
        transform: rotatex(0deg)
      }
}

Upvotes: 0

Related Questions