JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="credits">
  <div class="credit-stage">
  <div class="creditlogo">
  
  
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-1" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-2" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-3" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-4" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-5" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-6" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-7" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-8" />
    <img src="https://aninoob.com/ANINOOB.api/image.library/credits/aninoob.color.logo.png" class="credit-logo credit-logo-9" />
  </div>
  <img class="madewith" src="https://aninoob.com/ANINOOB.api/image.library/credits/made.with.png" />
  </div>
  <div class="credit-mask">
  </div>
</div>

CSS

.credits{
  position:fixed;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  pointer-events:none;
}
.credits>.credit-stage{
  background-color:#111;
  perspective:500px;
  position:absolute;
  height:100%;
  width:100%;
  animation: stagecolor 3s 1 ease-in-out forwards;
}
.credits .creditlogo{
  transform-style:preserve-3d;
  top:50%;
  left:50%;
  position:absolute;
  animation: spin 5s 1 ease-in-out forwards;
}
.credits .credit-logo{
  margin-left:-244px;
  margin-top:-51px;
  top:50%;
  left:50%;
  position:absolute;
  animation: logofadein 5s 1 linear forwards;
  opacity:0;
  transform:translateZ(0px);
}
.credits .credit-logo-1{
  transform:translateZ(-1px);
}
.credits .credit-logo-2{
  transform:translateZ(-2px);
}
.credits .credit-logo-3{
  transform:translateZ(-3px);
}
.credits .credit-logo-4{
  transform:translateZ(-4px);
}
.credits .credit-logo-5{
  transform:translateZ(-5px);
}
.credits .credit-logo-6{
  transform:translateZ(-6px);
}
.credits .credit-logo-7{
  transform:translateZ(-7px);
}
.credits .credit-logo-8{
  transform:translateZ(-8px);
}
.credits .credit-logo-9{
  transform:translateZ(-9px);
}
.credits .credit-logo-10{
  transform:translateZ(-10px);
}
@keyframes spin{
  0%{ transform:rotateY(0deg) rotateX( 80deg) translateZ(-100px); }
  100%{ transform:rotateY(360deg) rotateX( 0deg) translateZ(0px); }
}
@keyframes stagecolor{
  0%{ background-color:#111; }
  100%{ background-color:#000; }
}
@keyframes logofadein{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes maskfadeout{
  0%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes madewith{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
.credits .madewith{
  margin-left:-95px;
  margin-top:-71px;
  position:absolute;
  top:50%;
  left:50%;
  opacity:0;
  animation: madewith 3s 2s 1 ease-in-out forwards;
}
.credits>.credit-mask{
  height:100%;
  width:100%;
  position:absolute;
  animation: maskfadeout 3s 1 ease-in-out forwards;
 ...