Animation Comparison: CSS vs. JavaScript

Today’s web pages and applications are on the move. Static images are out and animations and animation effects are in. There are two approaches for creating animations for the web: CSS and JavaScript. Both have their own strengths and limitations. The approach you take really depends on what effect you are trying to achieve and other considerations of your project.

Animate with CSS Tricks

Animations developed with CSS are great for applications where you have small, self-contained user interface elements. You can use them to show a tool-tip or to bring a navigation menu in from the side. They only work with browsers that are Web-Kit based, but most desktop and mobile browsers are Web-kit based these days. It’s the easiest way to bring movement to your designs and allows you to control what you want to happen and how many times you would like it to happen. CSS animations use transitions or keyframes.

Transitions. With CSS transitions you can alter the appearance and behavior of an element whenever a state change occurs. The change occurs over a specified period of time and is triggered by an event such as being hovered over, focused on, active, or targeted. In order for a transition to happen an element must:

• Have a change in state, and
• Different styles must be identified for each state.

Transitions do a great job of making visual changes from one state to another so they are perfect for when you need a single state change. But sometimes you want more control or you need multiple states. That’s when it’s time to switch to animation with keyframes.

Keyframes. Keyframes are like jet-fueled transitions. Keyframes are the foundation of CSS animations and allow you to create smooth, maintainable animations that perform relatively well and don’t require reams of scripting. Use them to change properties from one value to another. You can also use keyframes to define how the animation appears at each stage of the timeline. Just identify the keyframes that make up your animation and give them a name. Invoke the keyframes by using the name of the set. Each @keyframes includes:

• Name of the animation: Descriptive name for the animation
• Stages of the animation: Each stage of the animation is represented as a percentage. The beginning state of the animation is represented by 0% and 100% represents the ending state. You can add multiple intermediate states in between.
• CSS Properties: The CSS properties defined for each stage of the animation timeline.

Once your keyframes are defined it is simply a matter of adding the animation properties to the CSS elements you want to animate. Animation properties do two things:

1. Assign the keyframe to an element
2. Define how it is animated.

With CSS animations you define the animation dependent of the target element. Check out this great example of CSS animation:

See the Pen CSS Animation by Lily Thomas (@MarkupPro) on CodePen.15206

JavaScript Animations

Creating animations with JavaScript is more complex than coding CSS transitions or animations, but with that complexity comes great power.

JavaScript animations are written in-line as part of your code. Use them to get advanced effects like bouncing, stop, pause, rewind, or slow-down. These advanced effects are based on the idea that you can animate by moving DOM elements around the page according to a pattern determined by a logical equation or function.

There are many frameworks available to handle JavaScript animation. The most popular are:

• jQuery
• Velocity
• WebGL
• GreenSock

These are all good libraries, but you know we always like to focus on the best. Right now, we think that Greensock is the best. This JavaScript animation framework outperforms everything else currently available.

Here’s why we like Greensock:

• Engineered to make animating simple and intuitive
• Completely independent
• Works and plays well with others (JQuery, HTML5, etc)
• Powerful
• Packed with features for professionals

Greensock gives you precise control over complex tweens and nested timelines. Even if you don’t spring for the paid membership there’s still plenty of free content and a great support network through the forums.

Take a look at this sample of great animation developed using JavaScript with Greensock.

See the Pen GreenSock Animation by Lily Thomas (@MarkupPro) on CodePen.15206

Animations are the difference between a project that works and a project that is an actual pleasure to use. Use animations to take your designs from meh to amazing.

What type of animations do you like to use? Tell us in the comments below.