CodePen

HTML

            
              <div class="result">
  Are pseudo-element animations supported?
  <div class="pass">Yes :-)</div>
  <div class="fail">No :-(</div>
</div>
            
          
!

CSS

            
              .csspseudoanimations {
  .pass {
    display: block;
  }
  
  .fail {
    display: none;
  }
}


body {
  padding: 2em;
  text-align: center;
}

.pass,
.fail {
  margin-top: 1em;
  font-weight: bold;
  font-size: 1.5em;
}

.pass {
  display: none;
  color: green;
}

.fail {
  color: red;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              Modernizr.addTest('csspseudoanimations', function () {
  var result = false;
  
  if (!Modernizr.csstransitions || !window.getComputedStyle) {
    return result;
  }
  
  var styles = 
    '#modernizr:before { content:" "; font-size:5px;' + Modernizr._prefixes.join('transition:0s 100s;') + '}' +
    '#modernizr.trigger:before { font-size:10px; }';
  
  Modernizr.testStyles(styles, function (elem) {
    // Force rendering of the element's styles so that the transition will trigger
    window.getComputedStyle(elem, ':before').getPropertyValue('font-size');
    elem.className += 'trigger';
    result = window.getComputedStyle(elem, ':before').getPropertyValue('font-size') === '5px';
  });
  
  return result;
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................