CSS Animation Feature Detect

Feature detecting CSS animations with Modernizr.

HTML

<script src="http://unmatchedstyle.com/wp-content/plugins/buddypress/bp-themes/bp-ums/js/libs/modernizr-2.5.2.min.js"></script>
<!-- Make sure modernizr has been loaded -->
<div class="animation">
    <div class="support">Yay! Your browser does support CSS animations!</div>
    <div class="no-support">Boo! Your browser does not support CSS animations!</div>
</div>

CSS

.animation div { display: none; } /* Hide both messages */

/* Does not support */
.no-cssanimations .animation .no-support { color: red; display: block; }

/* Supports */
.cssanimations .animation .support {
    -webkit-animation: animation-support 2s ease-in infinite alternate;
    -moz-animation: animation-support 2s ease-in infinite alternate;
    -ms-animation: animation-support 2s ease-in infinite alternate;
    -o-animation: animation-support 2s ease-in infinite alternate;
    animation: animation-support 2s ease-in infinite alternate;
    color: green;
    display: block;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
@-webkit-keyframes animation-support {
    from { margin-left: 0; }
    to { margin-left: 200px; }
}
@-moz-keyframes animation-support {
    from { margin-left: 0; }
    to { margin-left: 200px; }
}
@-ms-keyframes animation-support {
    from { margin-left: 0; }
    to { margin-left: 200px; }
}
@-o-keyframes animation-support {
    from { margin-left: 0; }
    to { margin-left: 200px; }
}
@keyframes animation-support {
    from { margin-left: 0; }
    to { margin-left: 200px; }
}