JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id='stage'>
    <img id = "logo" src = "http://callcenter/images/AutoZone_logo.png" />
</div>

CSS

#stage {
    -webkit-perspective: 800;
    margin: 150px auto;
}

#logo {
    margin: 0 auto;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: x-spin;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear; 
}
      
@-webkit-keyframes x-spin {
    0%    { -webkit-transform: rotateX(0deg); 
            -webkit-transform: rotateY(0deg);}
    50%   { -webkit-transform: rotateX(180deg); 
            -webkit-transform: rotateY(180deg); }
    100%  { -webkit-transform: rotateX(360deg); 
            -webkit-transform: rotateY(360deg);}
}

JavaScript

var $logo = $('img'),cycle;

(cycle = function() {
   $logo.animate({backgroundColor:"#000"}, 7500)
        .animate({backgroundColor:"#FFF"}, 1500,cycle);
})();