No JavaScript Required: CSS Animations

Posted in Web Development on January 2015

JavaScript and it’s popular library, jQuery, is undeniably a great language to use for web development, since animations can serve as an excellent marketing tool—giving the ability to catch users’ attention. However, having additional files and misuse of the language can slow page loads. CSS3 has given web developers the ability to easily incorporate animations within a commonly used file. As JavaScript can have bulky code and hinder page loads, CSS can serve as a more practical option for animations. This article will illustrate, for beginners, how animations can be easily implemented without being a mathematician to code JavaScript.

Web animations are an essential core web skill. Not long ago Flash was the leader for creating dynamisms, which often felt like an eternity to load, then JavaScript took the reins. With JavaScript, not only was there a plethora of code to dig through, but the developer had to set up manual loops, cautiously manage positions, and a vast of other issues that could go wrong as objects moved around the viewport. Now, one of the basic languages of development, CSS, opens the door for developers to create animations—even beginners.

Animations consist of two components, a style describing the animation and a set of keyframes that indicate the start and end states of the animation, and, possibly, waypoints along the way. Beyond the above-mentioned reasons to utilize CSS animations over JavaScript, there are many more reasons why it’s superior. For example, even under moderate system load, the animations run well. Additionally, allowing the browser to control animations allow enhanced performance and efficiency by decreasing the need to update animations running in tabs that aren’t visible.

The example below illustrates a simple animation using keyframes. Using white, black, and percentages creates a simple pulsating effect. When adding “animation” in your CSS you will need to set a variable, such as “pulse.” Be consistent because you will use that naming scheme in keyframes as well. If the pulsating effect and two colors aren’t quite enough, you can easily change the colors and percentages for variations. You will need to use -webkit to support Chrome, Safari, and Opera, which you can see in my examples.

Keyframes can do much more than change colors. Moving elements can be created without JavaScript. This ability is one of my favorite features. The options and creativity are virtually limitless. Below is an example of the ability to move an element. Within a few minutes I created a very simple sunrise animation. Although not breathtaking, it’s a simple design that doesn’t use a lot of code.

Simple enough, right? Instead of moving an element up or down, we have the ability to rotate as well. This can be done within the keyframes by using transform and specifying how it will move. Not only can you rotate, but animations can be triggered upon hover. Hover over the example below

When creating animations, the usage of JavaScript and jQuery isn’t absolutely necessary, nor do you need to be a math genius. Due to the simplicity, it’s possible to incorporate animations everywhere on a website. However, that’s probably not a wise choice. Although it might seem appealing, having too much movement on the screen isn’t good. Multiple moving objects may lead to a sensory overload for users. Distracting users from the core reason of having a website—showcasing or marketing talent or a product—is a big faux pas in design, user experience, and, possibly, content. Animations are most successful when used thoughtfully, so don’t overdo it.

As for the negative side of CSS animations, this functionality isn’t supported in old browser versions. If you’re already a developer then you are well aware that Internet Explore 9 and below tend to be a fiery mess of issues for development, so animations won’t work. Nevertheless, there are workarounds to deal with browser incompatibility, so that shouldn’t detour developers from using CSS animations.