Warning: this entry is a work-in-progress and incomplete. That said, it's still a useful reference to me which is why I've published it. I’ll flesh it out soon!
There are lots of different strands of web development. You try your best to be good at all of them, but there’s only so much time in the day! Animation is an area where I know a little but would love to know more, and from a practical perspective I’d certainly benefit from having some road-ready solutions to common challenges. As ever I want to favour web standards over libraries where possible, and take an approach that’s lean, accessible, progressively-enhanced and performance-optimised.
Here’s my attempt to break down web animation into bite-sized chunks for ocassional users like myself.
Defining animation #
Animation lets us make something visually move between different states over a given period of time.
Benefits of animation #
Animation is a good way of providing visual feedback, teaching users how to use a part of the interface, or adding life to a website and making it feel more “real”.
Simple animation with
transition properties #
transition is great for simple animations triggered by an event.
We start by defining two different states for an element—for example
transition between those states.
The first state would be in the element’s starting styles (either defined explicitly or existing implicitly based on property defaults) and the other in either its
transition the state change would still happen but would be instantaneous.
You’re not limited to only one property being animated and might, for example, transition between different
transform states simultaneously.
Here’s an example “rise on hover” effect, adapted from Stephanie Eckles’s Smol CSS.
- using custom properties makes it really easy to transition a different property than
transformwithout writing repetitious CSS.
- we have a parent and child (
<span>respectively in this example) allowing us to avoid the accidental flicker which can occur when the mouse is close to an animatable element’s border by having the child be the effect which animates when the trigger (the parent) is hovered.
Complex animations with
animation properties #
If an element needs to animate automatically (perhaps on page load or when added to the DOM), or is more complex than a simple A to B state change, then a CSS
animation may be more appropriate than
transition. Using this approach, animations can:
- run automatically (you don’t need an event to trigger a state change)
- go from an initial state through multiple intermediate steps to a final state rather than just from state A to state B
- run forwards, in reverse, or alternate directions
- loop infinitely
The required approach is:
@keyframesto define a reusable “template” set of animation states (or frames); then
animationproperties to an element we want to animate, including one or more
@keyframesto be used.
Here’s how you do it:
Note that you can also opt to include just one state in your
@keyframes rule, usually the initial state (written as either
0%) or final state (written as either
100%). You’d tend to do that for a two-state animation where the other “state” is in the element’s default styles, and you’d either be starting from the default styles (if your single
@keyframes state is
to) or finishing on them (if your single
@keyframes state is
Should I use
As far as I can tell there’s no major performance benefit of one over the other, so that’s not an issue.
When the animation will be triggered by pseudo-class-based events like
:focus and is simple i.e. based on just two states,
transition feels like the right choice.
Beyond that, the choice gets a bit less binary and seems to come down to developer preference. But here are a couple of notes that might help in making a decision.
For elements that need to “animate in” on page load such as an alert, or when newly added to the DOM such as items in a to-do list, an
keyframes feels the better choice. This is because
animation requires only one and can move between initial and final states automatically including inserting a delay before starting.
For animations that involve many frames; control over the number of iterations; or looping… use
For utility classes and classes that get added by JS to existing, visible elements following an event, either approach could be used. Arguably
transition is the slightly simpler and more elegant CSS to write if it covers your needs. Then again, you might want to reuse the animations applied by those classes for both existing, visible elements and new, animated-in elements, in which case you might feel that instead using
animation covers more situations.
A smooth animation should run at 60fps (frames per second). Animations that are too computationally expensive result in frames being dropped, i.e. a reduced fps rate, making the animation appear janky.
Cheap and slick properties #
The CSS properties
opacity are very cheap to animate. Also, browsers often optimise these types of animation using hardware acceleration. To hint to the browser that it should optimise an animation property (and to ensure it is handled by the GPU rather than passed from CPU to GPU causing a noticeable glitch) we should use the CSS
Expensive properties #
CSS properties which affect layout such as
height are very expensive to animate. Animating height causes a chain reaction where sibling elements have to move too. Use
transform over layout-affecting properties such as
left if you can.
Some other CSS properties are less expensive but still not ideal, for example
background-color. It doesn't affect layout but requires a repaint per frame.
Test your animations on a popular low-end device.
Timing functions #
- linear goes at the same rate from start to finish. It’s not like most motion in the real world.
- ease-out starts fast then gets really slow. Good for things that come in from off-screen, like a modal dialogue.
- ease-in starts slow then gets really fast. Good for moving somethng off-screen.
- ease-in-out is the combination of the previous two. It‘s symmetrical, having an equal amount of acceleration and deceleration. Good for things that happen in a loop such as element fading in and out.
- ease is the default value and features a brief ramp-up, then a lot of deceleration. It’s a good option for most general case motion that doesn’t enter or exit the viewport.
Practical examples #
But here are a few specific examples of animations I or teams I’ve worked on have had to implement.
Skip to content #
The anchor’s State A sees its position
fixed—i.e. positioned relative to the viewport—but then moved out of sight above it via
transform: translateY(-10em). However its
:focus styles define a State B where the intial
translate has been undone so that the link is visible (
transform: translateY(0em)). If we
transform property then we can animate the change of state over a chosen duration, and with our preferred timing function for the acceleration curve.
To see this in action, visit my pen Hiding: visually hidden until focused and press the tab key.
Animating in an existing element #
For this requirement we want an element to animate from invisible to visible on page load. This is pretty straightforward with CSS only using
Check out my fade in and out on page load with CSS codepen.
Animating in a newly added element #
Stephanie Eckles shared a great CSS-only solution for animating in a newly added element which handily includes a Codepen demo. She mentions “CSS-only” because it’s common for developers to achieve the fancy animation via
setTimeout() so that you can transition from the newly-added, invisible and class-free element state to adding a CSS class (perhaps called
show) that contains the
opacity:1, fancy transforms and a
transition. However Stephanie’s alternative approach combines i) hiding the element in its default styles; with ii) an automatically-running
animation that includes the necessary delay and also finishes in the keyframe’s single
Avoiding reliance on JS and finding a solution lower down the stack is always good.
Jhey Tompkins shared another CSS-only technique for adding elements to the DOM with snazzy entrance animations. He also uses just a single
@keyframes state but in his case the
from state which he uses to set the element’s initial
opacity:0, then in his animation he uses an
both (rather than
forwards as Stephanie used).
I can’t profess to fully understand
both however if you change Jhey’s example to use
forwards instead, then the element being animated in will temporarily appear before the animation starts (which ain’t good) rather than being initially invisible. Changing it to
backwards gets us back on track, so I guess the necessary value relates to whether you’re going for
both just covers you for both cases. I’d probably try to use the appropriate one rather than
both just in case there’s a performance implication.
Animated disclosure #
Here’s an interesting conundrum.
For disclosure (i.e. show and hide) widgets, I tend to either use the native HTML
<details> element if possible or else a simple, accessible DIY disclosure in which executing a
trigger toggles a content element’s
hidden attribute. In both cases, there’s no animation; the change from hidden to revealed and back again is immediate.
To my mind it’s generally preferable to keep it simple and avoid animating a disclosure widget. For a start, it’s tricky! The
<details> element can’t be (easily) animated. And if using a DIY widget it’ll likely involve animating one of the expensive properties. Animating
But let’s just say you have to do it, perhaps because the design spec requires it (like in BBC Sounds’ expanding and collapsing tracklists when viewed on narrow screens).
- Animate the
<details>element. This is a nice, standards-oriented approach. But it might only be viable for when you don’t need to mess with
<details>appearance too much. We’d struggle to apply very custom styles, or to handle a “show the first few list items but not all” requirement like in the BBC Sounds example;
- Animate CSS Grid. This is a nice idea but for now the animation only works in Firefox. It’d be great to just consider it a progressive enhancement so it just depends on whether the animation is deemed core to the experience;
Ringing bell icon #
To be written.
Pulsing “radar” effect #
To be written.
Accessibility and animation can co-exist, as Cassie Evans explains in her CSS-Tricks article Empathetic Animation. We should consider which parts of our website are suited to animation (for example perhaps not on serious, time-sensitive tasks) and we can also respect reduced motion preferences at a global level or in a more finer-grained way per component.
transition-delaycan be useful for avoiding common annoyances, such as when a dropdown menu that appears on hover disappears when you try to move the cursor to it.
- Inspiration: the animate.css library
- animate.css on github (good for searching for keyframe CSS)
- CSS transitions and transforms on Thoughtbot
- CSS Transitions by Josh Comeau
- Transition vs animation on CSS Animation
- Keyframe animation syntax on CSS-Tricks
- CSS animation for beginners on Thoughtbot
- Using CSS Transions on auto dimensions on CSS-Tricks