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