The problem with Website Animations

CSS animations are exciting. With tools like Less and Sass to ease the pain of writing cross-browser prefixed animations and keyframes, it is pretty exciting to leverage them in your designs. While in the past it was popular to use jQuery for animations, and you may be guilty of this yourself, CSS animations make for a more performant method of animations that are arguably easier to maintain (more straightforward code with fewer changes). What happens when you (begrudgingly) have other browsers to support? You have three options for these browsers:

  1. Fully replicate the animation in JavaScript
  2. Use a simplified animation
  3. Omit the animation

The correct choice depends on the circumstances, the time available, the percentage of affected visitors, and the importance (i.e., if it is for a client, internal company, or personal project).

Using Modern Practices

If you do decide you need to use JavaScript, you do not have to feel like you need to hold yourself back and continue using older methods. Use all the CSS animations you’d like! Just remember to ensure CSS Animations and their JavaScript-powered alternatives do not conflict with each other.

Today we will use Modernizr to aid in this process.

First, make sure to include Modernizr in your project if you have not already.

The following snippet explains the logic by which you can selectively use a JavaScript animation only when CSS Animations will not work on the visitor’s browser.

if ( Modernizr.cssanimations ) {
  console.log('This browser supports CSS animations. No need to run the JS version');
} else {
  console.log('Need to fallback to JavaScript. Run the animation below');
  // Animation code goes here
}

As an example, your code may look something like this:

  // Animation code goes here
  jQuery('#myEl').slideUp('fast');
  // or perhaps something more complicated
  jQuery('#myEl').animate({
    opacity: 0.1,
    padding: "+=20",
  }, 200, function() { 
    // Animation is complete
  });
}

Other Animation Fallback Tips

You can continue to use your CSS animations for browsers that support it, while users across all browsers get a more consistent, bug-free experience.

One extra thing you may want to do is apply different base CSS styling for elements based on whether the browser will be running the CSS animation or the JavaScript animation. The animations themselves will be ignored in browsers that don’t support it, but sometimes you may have other CSS properties that do not make sense for the other browsers. Modernizr applies classes you can target with CSS selectors to write your CSS according to which features the browser supports.

In this case, we will want to check for the class named cssanimations. An example to close:

.cssanimations #myEl {
  display: none;
}
#myEl {
  display: block;
}

The CSS differences you require will of course not match this example, but you can understand how your requirements may be at odds with one another or otherwise conflict. This method will help you keep your CSS clean, readable, and consistent without requiring you to do something like use the JavaScript to add a custom class to the element when animations are either supported or unsupported in order to selectively apply styles based on lack/presence of browser support.

I hope this has been helpful! I will provide further examples upon request.