JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="gran_wrap">
<!--   <div class="gvm_sign z-10"></div>
  <div class="gvm_logo_nu z-9"></div> -->
  <div class="gran_head z-8 updwn revparRot1"></div>
  <div class="gran_r_arm_2 z-7 updwn parRot"></div>
  <div class="gran_r_arm_1 z-6 updwn revparRot"></div>
  <div class="gran_torso z-5 updwn"></div>
  <div class="gran_l_arm z-4 updwn parRot"></div>
  <div class="gran_legs z-3"></div>
</div>

CSS

/* Grandle */

.gran_wrap {
  position: relative;
  min-height: 570px;
  height: auto;
  /* background: #403b4f; */
    background: url(http://greyvoth.com/A24/anim/gran_bg.png) no-repeat;
  overflow: hidden;
  padding: 0;
}

.gran_head {
  width: 287px;
  height: 321px;
  top: 0;
  left: 240px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-head.png) no-repeat;
}

.gran_torso {
  width: 487px;
  height: 608px;
  top: 85px;
  left: 170px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-torso.png) no-repeat;
}

.gran_l_arm {
  width: 700px;
  height: 516px;
  top: 35px;
  left: 20px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-l.png) no-repeat;
}

.gran_r_arm_1 {
  width: 141px;
  height: 284px;
  top: 213px;
  left: 400px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-r-1.png) no-repeat;
}

.gran_r_arm_2 {
  width: 244px;
  height: 497px;
  top: 50px;
  left: 410px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-arm-r-2.png) no-repeat;
}

.gran_legs {
  width: 428px;
  height: 89px;
  top: 500px;
  left: 145px;
  background: url(http://greyvoth.com/A24/anim/gran-anim/gran-legs.png) no-repeat;
}

.bg_1 {
  width: 802px;
  height: 802px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/gran_bg.png) no-repeat;
}

.gvm_logo_nu {
  width: 563px;
  height: 456px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/gvm_logo.png) no-repeat;
}

.gvm_sign {
  width: 486px;
  height: 409px;
  top: 0;
  left: 0;
  background: url(http://greyvoth.com/A24/anim/sign.png) no-repeat;
}

.gran_wrap > div {
  opacity: 1;
  position: absolute;
  scale: 60%;
}

/* Grandle */

.updwn {
    -webkit-animation-name: updwn;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;

    -moz-animation-name: updwn;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
 ...