JSFiddle - React, Tailwind, and code Playground

by Paul Leech

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(keyframes, 0);

    } else {

      var s = document.createElement('style');
      s.innerHTML =...