Detect CSS Animation support on :before :after pseudo-elements with javascript

detect-pesudo-animation.js

/**
 * Inspired from:
 *   http://davidwalsh.name/pseudo-element-animation
 *   http://stackoverflow.com/a/1016701/3828891
 */
var addCssRule = function(selector, rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(document.createElement('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};

var addKeyFrames = function(name, rule) {
  var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""];
  var keyFrames = [];
  var textNode = null;

  for (var i in keyFramePrefixes){

    keyFrames = '@'+keyFramePrefixes[i]+'keyframes ' + name + ' { ' + rule + ' }';

    textNode = document.createTextNode(keyFrames);
    document.getElementsByTagName("style")[0].appendChild(textNode);
  }
};


addKeyFrames('color', 'from,to { color: rgb(0, 255, 0); }');
addCssRule('.testEle:before', 'content: \'(...testing animation support...)\'; color: rgb(255, 0, 0); animation: color 1s infinite; -webkit-animation: color 1s infinite;');

var isPesudoElementAnimationSupported = !!function(){
  if(!window.getComputedStyle){return false;}

  var body = document.body || document.createElement('body'),
      node = document.createElement('div');

  node.className = 'testEle';
  body.appendChild(node);
  var color = window
                .getComputedStyle(node, ':before')
                .getPropertyValue('color');

  body.removeChild(node);
  return color === 'rgb(0, 255, 0)';
}();

if (!isPesudoElementAnimationSupported) {
  document.body.className += ' no-pesudo-animation';
}