JSFiddle - React, Tailwind, and code Playground

by LĂ©o Durand

HTML

<div class="ele all"></div>
<div class="ele2 all"></div>
<div class="ele3 all"></div>
<div class="ele4 all"></div>

CSS

@keyframes margin {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 30px;
  }
}
.ele {
  width: 60px;
  height: 60px;
  background-color: #ff6699;
  animation: 1s fadeIn, 1s margin;
  animation-fill-mode: forwards;
  opacity: 0;
  visibility: hidden;
  display:inline-block;
  vertical-align:top;
}

@keyframes fadeIn {
  15% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
    margin-top:30px;
  }
}

.ele2 {
  width: 60px;
  height: 60px;
  background-color: #ff6699;
  animation: 1s fadeIn2, 2s margin;
  animation-fill-mode: forwards;
  opacity: 0;
  visibility: hidden;
  display:inline-block;
  vertical-align:top;
}

@keyframes fadeIn2 {
  30% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
    margin-top:30px;
  }
}

.ele3 {
  width: 60px;
  height: 60px;
  background-color: #ff6699;
  animation: 1s fadeIn3, 3s margin;
  animation-fill-mode: forwards;
  opacity: 0;
  visibility: hidden;
  display:inline-block;
  vertical-align:top;
}

@keyframes fadeIn3 {
  45% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.ele4 {
  width: 60px;
  height: 60px;
  background-color: #ff6699;
  animation: 1s fadeIn4, 4s margin ;
  animation-fill-mode: forwards;
  opacity: 0;
  display:inline-block;
  vertical-align:top;
}

@keyframes fadeIn4 {
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
      margin-top: 30px;

  }
}