JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3 ani_wrap">
    <img class="" src="http://galnova.com/A19/icon-ani-wrath-1.png" />
    <img class="animated tada infinite" src="http://galnova.com/A19/icon-ani-wrath-2.png" />
    <img class="" src="http://galnova.com/A19/icon-ani-wrath-3.png" />
    <img src="http://galnova.com/A19/icon-ani-over.png" />
    <div>
      <img class="beegee" src="http://galnova.com/A19/icon-ani-bg.png" />
    </div>

  </div>

  <div class="col-sm-6 col-md-4 col-lg-3 ani_wrap">
    <img class="rott_r_2" src="http://galnova.com/A19/icon-ani-fire-1.png" />
    <img class="rott_l_1" src="http://galnova.com/A19/icon-ani-fire-2.png" />
    <img class="rott_r_2" src="http://galnova.com/A19/icon-ani-fire-3.png" />
    <img src="http://galnova.com/A19/icon-ani-over.png" />
    <div>
      <img class="beegee" src="http://galnova.com/A19/icon-ani-bg.png" />
    </div>

  </div>

  <div class="col-sm-6 col-md-4 col-lg-3 ani_wrap">
    <img class="rott_l_1" src="http://galnova.com/A19/icon-ani-chain-1.png" />
    <img src="http://galnova.com/A19/icon-ani-chain-2.png" />
    <img src="http://galnova.com/A19/icon-ani-chain-3.png" />
    <img src="http://galnova.com/A19/icon-ani-over.png" />
    <div>
      <img class="beegee" src="http://galnova.com/A19/icon-ani-bg.png" />
    </div>

  </div>

  <div class="col-sm-6 col-md-4 col-lg-3 ani_wrap">
    <img class="rott_r_2" src="http://galnova.com/A19/icon-ani-gra-1.png" />
    <img src="http://galnova.com/A19/icon-ani-gra-2.png" />
    <img src="http://galnova.com/A19/icon-ani-over.png" />
    <div>
      <img class="beegee" src="http://galnova.com/A19/icon-ani-bg.png" />
    </div>
  </div>

...

CSS

.ani_wrap {
  /* padding: 5px; */
/*   min-height: 100px;
  float: left; */
  overflow: hidden;
}

.ani_wrap>img {
  /* display: block; */
  position: absolute;
width: 92%;
  /* height: auto; */
  /* overflow: hidden; */
  /* margin: auto; */
  /* padding: 5px; */
}

.beegee {
  /* position: relative!important; */
  display: block;

  width: 100%;
  /* height: auto; */
}

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

@-webkit-keyframes rotation3 {
  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);
  }
}