JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loadengine">
	<img src="http://www.manyjets.com/loader/engine_small_external.png" id="engine_small_external" class="engine_small_external">
	<img src="http://www.manyjets.com/loader/engine_small_int_blade.png" id="blades" class="blades">
	<img src="http://www.manyjets.com/loader/engine_small_int_spiral.png" id="spiral" class="spiral">
	<img src="http://www.manyjets.com/loader/engine_small_int_static.png" id="engine_small_int_static" class="engine_small_int_static">
</div>

CSS

/* BEGIN this section has no problem. leave it alone */
.loadengine { position: fixed; top: 40%; left: 50%; margin-top: -50px; margin-left: -100px; }
#engine_small_external { position: fixed; top: 40%; left: 50%; margin-top: -42px; margin-left: -92px; }
#engine_small_int_static { width: 30px; height: 30px; position: absolute;  left: 56px; top: 56px; }
/* END this section has no problem. leave it alone */

#blades {
  width: 93px;
  height: 93px;
  position: absolute;
  left: 25px;
  top: 25px;
}
#spiral {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 63px;
  top: 63px;
  background: black;
}
.blades {
  -webkit-animation-name: slow-rotator, med-rotator, rotator;
  -webkit-animation-duration: 5s, 2s, 0.07s;
  -webkit-animation-iteration-count:2,4, infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
}
.spiral {
  -webkit-animation-name: slow-rotator, med-rotator, rotator;
  -webkit-animation-duration: 5s, 2s, 0.07s;
  -webkit-animation-iteration-count: 2, 4, infinite;
  -webkit-animation-fill-mode: forwards;
     -webkit-animation-timing-function: linear;
}
@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
    
    @-webkit-keyframes medium-rotator {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes slow-rotator {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
/* 0.07s will give effect of it moving backwards and forwards like IRL */

JavaScript

// Trying to make the blade begin to move slowly but then gain speed.
// Pseudo-code: From(speed 5s = 1 full 360deg rotation) to(speed 0.07s = 1 full 360deg rotation). At 100% (after animation is fully played), "-webkit-animation-fill-mode: forwards;" should kick in so that speed 0.07s remains constant (linear) and the animation is not looped back to the beginning.