CSS3 Animations 101: What are Animations?

If you followed my recent series about CSS3 transitions, you’ll understand that they’re an animated effect between a start and end state which is fired by a trigger such as a CSS :hover or JavaScript event. In this series we’ll look at CSS3 animations. They share many of the same concepts as transitions, but are far more flexible — if a little more difficult to use. This is the first in a four-part series about CSS3 animations but each article can be read individually or out of sequence. Our initial question…

How are Animations Different to Transitions?

There are a number of critical differences:

Like transitions, an animation can define a start and end state but it can also specify any number of intermediary states to create more sophisticated effects
An animation can be triggered like a transition, but it can also run without being triggered, e.g. immediately after page load
While a transition will only react when a trigger is activated or deactivated, an animation can loop a finite or infinite number of times
An animation loop can play forward, in reverse or alternate between the two.
Animation CSS is more verbose and difficult to write … but it’s indisputably simpler than comparable JavaScript code.

There are those who argue that animations should be handled by JavaScript because they’re behavioral. They’re not. The browser is only tweening frames between states; it’s generating the missing animation frames so you don’t need to. If you want to add complex interactivity or collision control you’ll still need JavaScript. The benefits for CSS3 animations are the same as transitions: they’re easy to create and fast complex effects are handled by the browser — not your code.

How do You Define an Animation?

An animation is defined using: Keyframes “Keyframes” is a term you may have heard in relation to video editing. A single keyframe defines a point during the animation where a known state is specified, e.g.

at 0% complete, the background color is blue
at 50% complete, the background color is green
at 100% complete, the background color is red

You don’t care about all the colors between blue and green or green and red; the browser will determine them. A set of keyframes is given a name so it can be reused on any number of elements. Animation Properties

The keyframes are applied to elements using a number of properties which define the name, duration, timing functions and repeating options.

What CSS Properties Can be Animated?

Like CSS3 transitions, you can only animate CSS properties with discrete values which change between keyframes. This includes layout properties (width, height, padding, margins, borders), positional properties (left, right, top, bottom), transformations, font sizes, colors, background colors and opacities. Properties which use a keyword value such as display: none;, visibility: hidden; or height: auto; cannot be animated. Refer to CSS3 Transition Property Basics

for a more detailed explanation and some workarounds.

Cross-Browser Animation Support

CSS3 animations are supported in Firefox, IE10 and Opera 12 without a prefix. At the time of writing, the Webkit browsers including Chrome, Safari and Opera 15+ require the -webkit- prefix on all keyframe and property definitions. IE9 and below do not support animations. That’s not quite the whole story — open this link in a range of browsers: View the CSS3 demonstration page… Firefox, IE10 and Opera 12 work perfectly. Chrome and Opera 15 fail to change the border-radius and background colors. In my experience:

Firefox is normally the best-behaved browser and implements animations as you expect.
IE10 is generally good but sometimes fails to show certain minor effects such as box-shadows.
Opera 12 applies most effects well, but often gets timings wrong.
The webkit browsers are quirky (and require a prefix which doubles the quantity of code you need). In this example, the webkit gives up on some CSS properties because there’s a rotation transform. It’s a lesson for any developer who thinks webkit is perfect and should be the only browser engine!

Fortunately, the differences rarely matter. If CSS3 animation fails in some respect, the start and end states should eventually be reached. At worst, no animation will occur — but they should never be critical for content display. In the next part we’ll define keyframes and the animation properties.

Frequently Asked Questions about CSS3 Animations

What are the key differences between CSS3 animations and JavaScript animations?

CSS3 animations and JavaScript animations serve the same purpose of animating web elements, but they have some key differences. CSS3 animations are simpler to implement and require less coding. They are also more efficient as they run on the browser’s rendering engine, freeing up JavaScript to handle other tasks. However, CSS3 animations have limited control and flexibility compared to JavaScript animations. JavaScript animations offer more control over the animation sequence and can handle complex animations better. They also provide better compatibility with older browsers.

How can I use CSS3 animations to improve user experience on my website?

CSS3 animations can significantly enhance the user experience on your website. They can be used to draw attention to important elements, provide visual feedback, and create a more engaging and interactive experience. For example, you can use animations to highlight a call-to-action button, animate page transitions, or create interactive hover effects. However, it’s important to use animations sparingly and not to distract from the main content.

Are CSS3 animations compatible with all browsers?

CSS3 animations are widely supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, they may not work properly in older browsers or certain versions of Internet Explorer. You can use tools like Can I Use to check the compatibility of CSS3 animations with different browsers. If necessary, you can use JavaScript or jQuery as a fallback for browsers that don’t support CSS3 animations.

How can I optimize the performance of CSS3 animations?

To optimize the performance of CSS3 animations, you should minimize the number of animated properties and only animate properties that trigger composite layers, such as transform and opacity. Avoid animating properties that trigger layout or paint, such as width, height, and margin, as they can cause performance issues. Also, use the will-change property to inform the browser about the properties you plan to animate, so it can optimize them in advance.

Can I control the timing and sequence of CSS3 animations?

Yes, you can control the timing and sequence of CSS3 animations using the animation-duration, animation-delay, and animation-timing-function properties. The animation-duration property specifies the duration of the animation, the animation-delay property specifies a delay before the animation starts, and the animation-timing-function property specifies the speed curve of the animation. You can also use the animation-iteration-count property to specify the number of times the animation should repeat.

How can I create complex animations with CSS3?

To create complex animations with CSS3, you can use keyframes. Keyframes allow you to specify the behavior of the animation at different points along the timeline. You can use the @keyframes rule to define a set of keyframes, and then use the animation-name property to link the keyframes to an element. This allows you to create complex animations with multiple stages and transitions.

Can I use CSS3 animations to animate SVG elements?

Yes, you can use CSS3 animations to animate SVG elements. However, not all CSS properties can be applied to SVG elements, and the behavior may vary between different browsers. You can use the transform property to animate the position, scale, rotation, and skew of SVG elements, and the fill and stroke properties to animate the color. For more complex animations, you might want to consider using a JavaScript library like GSAP or Snap.svg.

How can I test and debug CSS3 animations?

You can test and debug CSS3 animations using the developer tools in your browser. The animation inspector allows you to visualize and control the animation, adjust the timing, and step through each frame. You can also use the performance panel to analyze the performance of your animations and identify any potential issues.

Can I pause and resume CSS3 animations?

Yes, you can pause and resume CSS3 animations using the animation-play-state property. The animation-play-state property accepts two values: running and paused. By default, the animation is running. You can set the animation-play-state property to paused to pause the animation, and set it back to running to resume the animation. You can also use JavaScript to dynamically control the play state of the animation.

How can I learn more about CSS3 animations?

There are many resources available to learn more about CSS3 animations. The Mozilla Developer Network (MDN) provides comprehensive documentation on CSS3 animations, including tutorials, examples, and a reference guide. You can also find many tutorials and articles on websites like SitePoint, CSS-Tricks, and Smashing Magazine. Additionally, there are many online courses available on platforms like Udemy, Coursera, and Codecademy.