JSFiddle - React, Tailwind, and code Playground

Test coin flip on div (CSS3 anim)

by Zonedark

HTML

<div class="papa">
  <div class="test">
    First pub
  </div>
  <div class="test flip">
    Second pub
  </div>
</div>

<div class="papa">
  <div class="test" style="animation-timing-function:ease">
    First pub
  </div>
  <div class="test flip" style="animation-timing-function:ease">
    Second pub
  </div>
</div>

<div class="papa">
  <div class="test" style="animation-timing-function:ease-in">
    First pub
  </div>
  <div class="test flip" style="animation-timing-function:ease-in">
    Second pub
  </div>
</div>

<div class="papa">
  <div class="test" style="animation-timing-function:ease-out">
    First pub
  </div>
  <div class="test flip" style="animation-timing-function:ease-out">
    Second pub
  </div>
</div>

<div class="papa">
  <div class="test" style="animation-timing-function:ease-in-out">
    First pub
  </div>
  <div class="test flip" style="animation-timing-function:ease-in-out">
    Second pub
  </div>
</div>

CSS

.papa{
    width: 200px;
    height: 100px;
    margin-top: 20px;
    margin-left:20px;
    position:relative;
}
.test {
  border-radius: 3px;
  border: solid 1px lightblue;
  background-color: lightblue;
  color: blue;
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  transition: visibility 500ms, linear;
}

.flip {
  animation-name: spin1;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  visibility: hidden;
}
.flap{
  visibility: visible;
  
  animation-name: spin2;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.after{
  animation-delay:500ms;
  transition-delay:550ms;
}
@keyframes spin1 {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(90deg);
  }
}
@keyframes spin2 {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

JavaScript

$(document).ready(function() {
  if (true)setInterval(function(){ 
  	var first = $('.papa div:first-child');
    var second = $('.papa div:last-child');
 		if (!first.hasClass('flip')) {
    	first.removeClass('flap after').addClass('flip');
      second.removeClass('flip').addClass('after flap');
    }
    else
    {
    	first.removeClass('flip').addClass('after flap');
      second.removeClass('flap after').addClass('flip');
    }

  }, 2000);
});