JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/davidck/Fx.Anything/0.1/Source/Fx.Anything.js"></script>
<div class="engine">
  <div class="propeller"></div>
</div>

CSS

body {
  padding: 80px;
}

.engine {
  position: relative;
  width: 300px;
  height: 300px;
}

.propeller {
  background: url('http://www.learning-to-fly.com/images/Propeller1.jpg') white no-repeat left top;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  transform-origin: 142px 143px;
  -ms-transform-origin: 142px 143px;
  -webkit-transform-origin: 142px 143px;
  -moz-transform-origin: 142px 143px;
  -o-transform-origin: 142px 143px;
}

JavaScript

var _propeller = document.body.getElement('.propeller');

var rotation = 0;
var fx = new Fx.Anything({
  duration: 20000,
  transitions: Fx.Transitions.Quad.easeInOut,
  onReport: function(progress) {
    rotation = progress * (360 * 12);

    var str_rotation = 'rotate(' + rotation + 'deg)';
    _propeller.setStyles({
      'transform': str_rotation,
      '-ms-transform': str_rotation,
      '-webkit-transform': str_rotation,
      '-o-transform': str_rotation,
      '-moz-transform': str_rotation
    });
  }
});

fx.start();