Will animation end event be fired if browser doesn't support CSS animations?
In the event that a browser does not support CSS3 animations, the animationEnd event will also not be fired. As a result, the callback function that is executed upon the completion of animation will not be called at all.
What can be done to execute the callback function in such cases?
One possible solution to ensure that the callback function still executes on browsers without CSS3 animation support is to check for animation support and either (a) execute the callback function after the completion of animation if it is supported or (b) immediately execute the callback function if animation isn't supported.
In the code snippet below, I have utilized the code provided by MDN to test for animation support. On browsers that do support animation, this snippet will produce a shake effect along with a color change to red at the end of the animation. However, in browsers that do not support animations, the background color will change to red immediately.
This snippet has been tested in IE9 (which does not support CSS3 animation), IE10, IE11, Edge, Mozilla, and Chrome. In Opera, while the code functions properly when tested separately in a Fiddle or CodePen, the color does not change after animation in the snippet here. This issue is likely related to Stack Snippet and should not reflect on the actual code itself.
/* Code obtained from MDN */
var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '',
elm = document.createElement('div');
if (elm.style.animationName !== undefined) {
animation = true;
}
if (animation === false) {
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
pfx = domPrefixes[i];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
/* End of code extracted from MDN */
if (animation) { // Check if animation is supported
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.animated-element').one(animationEnd, function() { // If supported, attach animationEnd handler
callback();
})
} else { // If animation isn't supported, execute the callback immediately
callback();
}
function callback() {
console.log('Hello World!');
$('.animated-element').css('background-color', 'red');
}
.animated-element {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid;
animation: shake 1s 2s linear forwards;
}
@keyframes shake {
0% {
transform: translateX(10px);
}
25% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='animated-element'>Hello!</div>
Are there any libraries available for performing these tests?
To test for animation support and decide further actions based on the results, you can utilize libraries like Modernizr.