JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="cogContainer">
    <div class="cog cog1"></div>
    <div class="cog cog2"></div>
</div>

CSS

@-moz-keyframes spin-right {
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin-right {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin-right {
  to {
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin-left {
  to {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes spin-left {
  to {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes spin-left {
  to {
    transform: rotate(-360deg);
  }
}

body{
    margin:0px;
    padding:0px;
}

.cogContainer{
    background: rgb(238, 238, 238);
    border-bottom: 1px solid #d2d3d4;
    width: 100%;
    min-height: 140px;
    position: relative;
    overflow: hidden;
}

.cog{
    background: url(http://deposco.matturglavitch.com/wp-content/uploads/2013/10/gear.png);
    height: 225px;
    width: 225px;
    position: absolute;
    opacity: 0.4 !important;
}

.cog1{
    top: -50px;
    right: 0px;
    -webkit-animation-name: spin-right;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin-right;
    -moz-animation-duration: 30s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin-right;
    -ms-animation-duration: 30s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: spin-right;
    -o-animation-duration: 30s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: spin-right;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.cog2{
    top: 0px;
    right: 215px;
    -webkit-animation-name: spin-left;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin-left;
    -moz-animation-duration: 30s;
   ...

JavaScript

$.fn.animateRotate = function(angle, duration, easing, complete) {
    return this.each(function() {
        var $elem = $(this);

        $({deg: 0}).animate({deg: angle}, {
            duration: duration,
            easing: easing,
            step: function(now) {
                $elem.css({
                    transform: 'rotate(' + now + 'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};



if (navigator.userAgent.match(/msie/i) ){
    // Start IE Rotate animations here
    $('.cog1').animateRotate(90);
}