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;
}

            
          
!

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;
});
            
          
!
999px
Loading ..................