JSFiddle - React, Tailwind, and code Playground

by codepo8

HTML

<header><h1>Rotating an element (by detecting CSS3 animation)</h1></header>
  <section>
  <div id="demo"></div>
  <p id="technique"></p>
  </section>

CSS

*{margin:0;padding:0;font-size:15px;font-family:helvetica,arial,sans-serif}
  body,html{text-align:center;color:#000;background:#bada55}
  footer,section,header{display:block;}
  #demo{
    width:100px;
    height:100px;
background:url(https://developer.mozilla.org/media/uploads/demos/c/o/codepo8/3d78d077a51c2a79281111cdd3d0b0cc/browser-fountain_1314288268_demo_package/img/firefox.png) center center no-repeat #333;
    margin:30px auto;
  }
  h1{font-size:24px;color:#000;font-family:futura,arial;margin:5px;}
  footer{position:absolute;bottom:5px;right:5px;}
  footer p,footer a{font-size:10px;color:#000}

JavaScript

function init() {

  var domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
      elm = document.getElementById( 'demo' ),
      message = document.getElementById( 'technique' ),
      rotate = 0,
      animation = false,
      transformation = false,
      animationstring = 'animation',
      transformstring = 'transform',
      keyframeprefix = '',
      pfx = '';

  if( elm.style.animationName ) { animation = true; }    
  if( elm.style.transform ) { transformation = true; }    

  if( animation === false ) {
    for( var i = 0; i < domPrefixes.length; i++ ) {
      if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
        pfx = domPrefixes[ i ];
        animationstring = pfx + 'Animation';
        keyframeprefix = '-' + pfx.toLowerCase() + '-';
        animation = true;
        break;
      }
    }
  }
  
  if( transformation === false ) {
    for( var i = 0; i < domPrefixes.length; i++ ) {
      if( elm.style[ domPrefixes[i] + 'Transform' ] !== undefined ) {
        pfx = domPrefixes[ i ];
        transformstring = pfx + 'Transform';
        transformation = true;
        break;
      }
    }
  }
  
  if( animation === false ) {

    message.innerHTML += 'Using an animation loop';

    if( requestAnimationFrame.toString().indexOf( 'mation' ) !== -1 ) {
      message.innerHTML += ' with requestAnimationFrame';
    } else {
      message.innerHTML += ' without requestAnimationFrame';
    }

    if( transformation !== false ) {
        loop();
    } 

  } else {
    
    message.innerHTML = 'Animated with CSS3 animation';

    elm.style[ animationstring ] = 'rotate 1s linear infinite';

    var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
                    '}';

    if( document.styleSheets && document.styleSheets.length ) {

        document.styleSheets[0].insertRule(...