The State of CSS Animation

CSS has matured in many ways over the years, not least in terms of CSS animations. With each day that passes more and more developers are creating living, breathing interfaces. In this article we’ll look at the state of CSS animations, how it has grown, what it’s capable of today and cover some resources and tools available. Let’s get moving!

Growth

Use of animation on the web are rising, largely because of the transition and @keyframes additions to CSS. There once was a time when animations and CSS didn’t know one another, but that isn’t the case today. Articles, tutorials, premium courses and even motion guidelines are far more accessible now than they once were. Combining @keyframes with the animation property, along with transition has finally given developers the chance to craft motion properly and lend interfaces a personality and life once unconsidered.

Part of Googles Material Motion Guidelines — From Google’s Material Motion Guidelines

There has never been a more exciting time for CSS animations and interaction design than right now!

Animation Property & Keyframes

Current implementation of the animation property allows developers to control the duration, timing, delay, iteration count, direction, fill mode and play state. The timing portion also allows for a steps() function. This special timing function breaks an animation or transition into segments (like a film strip), rather than as one continuous transition from one state to another. Keyframes allow motion developers to declare positions using from, to and even percentages to animate between property values declared. That’s a great start, but we’ll discuss in a moment where it falls short.

Transition Property

Then there’s the glorious transition property; a property just as fancy as animation and one which allows us to control animation speed when changing properties. The process of transitioning between two states is typically called an implicit transition; a term which describes the states in-between the start and final states, implicitly defined by the browser. Transitions currently allow for the customizing of the property, timing, duration and delay.

The intro video above is taken from Up and Running With CSS Transitions by Craig Campbell.

What’s Missing?

CSS animation might be powerful as it sits, but it still lacks a particular aspect animators desire the most; timeline-esque control. What I mean by this are sequences that can be influenced and manipulated based on timing.

@keyframes move-object {
    from { starting position property and values }
    at 2s { do this }
    wait-until 4s { this happens }
    to { stop position property and values }
}

The syntax above doesn’t exist, but paints a picture in more detail of what animation experts on the web crave. GreenSock for example, is well known for this type of sequencing, but unfortunately only happens in JavaScript. Wouldn’t it be great to have this in CSS too? I think so.

Video above taken from GreenSock Animation Platform: First Steps by Craig Campbell.

There is certainly the ability to control animation and transition events through the use of JavaScript for further granular control of a sequence. With JavaScript, developers can detect the start of every new animation iteration, when an animation occurs, when the animation ends and the same is true for transition events.

Browser Inspection and Tooling

These are pretty exciting times for browser developer tooling in order to inspect and adjust CSS animations. Most browsers (Firefox, Chrome) allow for CSS animations inspection with regards to Safari and Edge. From what I’ve been told by a source who works for Microsoft, animations inspection is something the Microsoft team really wants to do. Let us hope this is the same for Safari.

With regards to the browsers that do support animation inspection we have the following abilities…

Timeline inspection that can be scrubbed.
Show animations applied to the ::before and ::after pseudo-elements.
Adjust keyframes property and values on the fly.
Reporting of keyframes names.
Displaying of properties animated.
Easing pickers and bézier curve editors.
Color coding to know if the event is a transition, keyframe or web animation.
Control and change the playback rate.

While developers have quite a bit to choose from based on the list above, they still require more tooling on animations regarding user interaction. This could also be known as property interpolation, the insertion of an intermediate value into a series by calculating it from surrounding known values; much like when you change to a new value with transitions. These dynamic/reactive animations can start at any time, are indefinite, and have variable durations based on user interaction. Something once again that cannot be debugged or inspected from any developer tooling provided by a browser at this time.

The Future

The future looks bright for CSS animation, though with everything spec related it tends to moves slow. The CSS motion-path module, contain, will-change and the prefers-reduced-motion media query (not yet a standard and WebKit only) are the current upcoming features for CSS animators.

CSS Motion Path

Motion paths allow developers to animate any graphical object along an author specified path. You can define a path in a very similar fashion defined by SVG 1.1.

1	.my-element {
2	motion-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');
3	motion-offset: 0;
4	motion-rotation: reverse;
5	}

The motion-path defines a path an element will follow or move upon. Our motion-offset property is the position placement of the element somewhere on the path. The property motion-rotation is the direction the element “faces” as it moves along the path.

Check out these collections of demos on CodePen from Dan Wilson which provide live examples showcasing motion-path capabilities.

My CSS Motion Path Demos by Dan Wilson
CSS Motion Path by Dan Wilson

Will Change

The will-change property provides a way for authors to hint at browsers on the kind of changes that are expected for an element. This lets the browser set up appropriate optimizations ahead of time before the element is actually changed.

1	.my-element {
2	will-change: transform;
3	}

This kind of optimization can improve the perceived load time and layout of a page by completing expensive work ahead of time before they’re actually required. Saying that, it’s suggested that developers don’t apply will-change to too many elements as it can consume resources and cause a page to slow down.

Prefers Reduced Motion

This non-spec addition to WebKit creates styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.

@media (prefers-reduced-motion) {
  .my-element {
     animation: none;
  }
}

This is more of an accessibility situation versus actual motion creation. An interesting one to consider though and to one to check out at your leisure.

Contain

This CSS module indicates that the element’s subtree is independent of the rest of the page, thus enabling heavy optimizations by user agents when used correctly. The most interesting one for CSS animators is the paint value that can be passed.

1	.element-with-motion {
2	contain: paint;
3	}

If the containing element is off-screen or obscured, the browser can directly skip painting its contents as they’re guaranteed to be off-screen or obscured. This ultimately provides value by ensuring a faster rendering pipeline during an initial paint. This is currently still a working draft at the W3C.

Resources

There are plenty of ways to keep up with CSS animations. Below are some tools and resources including specs to read over at your leisure. If you know of other awesome and helpful resources please let us know in the comments and we’ll add them to the list. Happy animating!

W3C Specs

Learning

A Beginner’s Introduction to CSS Animation by Catalin Miron
9 Popular Courses on CSS Animation on Envato Tuts+
CSS Animation Rocks
How to read cubic-bezier curves by Val Head
An Introduction To CSS Keyframes Animation on Smashing Magazine
Web Animation Essentials: CSS Animations and Transitions by Rachel Nabors
Jank Free
Intro to CSS 3D transforms by David DeSandro
Using CSS, can I animate <CSS Property> ?
CSS Transitions and Animations. Motion Path Module CSS by Ruslan Homyak
The CSS Animations Pocket Guide by Val Head

Tools

stylie by Jeremy Kahn
animate.css by Daniel Eden
Material Components for the web
Easings by Andrey Sitnik
Animista by Ana Travas
WAIT! Animate by Will Stone
cssanimate.com CSS3 Keyframes Animation Generator
cubic-bezier.com by Lea Verou
cssreference.io A free visual guide to CSS, by Jeremy Thomas
Motion UI from ZURB
magic CSS3 Animations with special effects, by Christian Pucci
Hover.css by Ian Lunn
CSSYNTH by Bennett Feely