JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<div class="gal_logo_wrap">
  <div class="front_g pulse"></div>
  <div class="mid_saw"></div>
  <div class="back_circ"></div>
</div>

CSS

.gal_logo_wrap {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto;
  overflow: hidden;
}
 
 .front_g {
  position: absolute;
  z-index: 2;
  width: 300px;
  content: url(http://galnova.com/logo-animated/front-g.png);
}

 .mid_saw {
  position: absolute;
  width: 300px;
  content: url(http://galnova.com/logo-animated/mid-saw.png);
  -webkit-animation: spinn 20s infinite linear;
}

.back_circ {
  width: 100%;
  height: 100%;
  content: url(http://galnova.com/logo-animated/back-circ.png);
}
  
/*-- animations --*/
  
  @-webkit-keyframes spinn {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

.pulse {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

/*-- animations --*/