JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="ani_wrap">
  <div class="ani_inner_wrap ani_overlay"></div>
  <div class="ani_inner_wrap hell_1 rott_r_1"></div>
  <div class="ani_inner_wrap hell_2 rott_l_1"></div>
  <div class="ani_inner_wrap hell_3 rott_r_2"></div>
</div>

<div class="ani_wrap">
  <div class="ani_inner_wrap ani_overlay"></div>
  <div class="ani_inner_wrap chain_1 rott_l_1"></div>
  <div class="ani_inner_wrap chain_2"></div>
  <div class="ani_inner_wrap chain_3"></div>
</div>

<div class="ani_wrap">
  <div class="ani_inner_wrap ani_overlay"></div>
  <div class="ani_inner_wrap gra_1 rott_r_2"></div>
  <div class="ani_inner_wrap gra_2"></div>
</div>

<div class="ani_wrap">
  <div class="ani_inner_wrap ani_overlay"></div>
  <div class="ani_inner_wrap earth_1"></div>
  <div class="ani_inner_wrap earth_2 rott_l_1"></div>
  <div class="ani_inner_wrap earth_3 rott_l_1"></div>
</div>

CSS

.ani_wrap {
  display: block;
  float: left;
  position: relative;
  width: 409px;
  height: 409px;
  background: url(http://galnova.com/A19/icon-ani-bg.png);
}

.ani_overlay {
  background: url(http://galnova.com/A19/icon-ani-over.png);
}

.ani_inner_wrap {
  position: absolute;
  width: 409px;
  height: 409px;
}

.rott_r_1 {
  -webkit-animation: rotation 60s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

.rott_l_1 {
  -webkit-animation: rotation1 70s infinite linear;
}

@-webkit-keyframes rotation1 {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(-359deg);
		}
}

.rott_r_2 {
  -webkit-animation: rotation2 80s infinite linear;
}

@-webkit-keyframes rotation2 {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

.hell_1 {
  background: url(http://galnova.com/A19/icon-ani-fire-1.png);

}

.hell_2 {
  background: url(http://galnova.com/A19/icon-ani-fire-2.png);
}

.hell_3 {
  background: url(http://galnova.com/A19/icon-ani-fire-3.png);
}

.chain_1 {
  background: url(http://galnova.com/A19/icon-ani-chain-1.png);

}

.chain_2 {
  background: url(http://galnova.com/A19/icon-ani-chain-2.png);
}

.chain_3 {
  background: url(http://galnova.com/A19/icon-ani-chain-3.png);
}

.gra_1 {
  background: url(http://galnova.com/A19/icon-ani-gra-1.png);
}

.gra_2 {
  background: url(http://galnova.com/A19/icon-ani-gra-2.png);
}

.earth_1 {
  background: url(http://galnova.com/A19/icon-ani-earth-1.png);
}

.earth_2 {
  background: url(http://galnova.com/A19/icon-ani-earth-2.png);
}

.earth_3 {
  background: url(http://galnova.com/A19/icon-ani-earth-3.png);
}