Create cool UI animations with CSS
Your guide to using CSS transitions, keyframes and SVG animation to create animations that delight.
Page speed and performance is an important aspect of any application or website. If you are using animation as part of your project, it can be a good place to start when trying to optimise performance. Animating too much or too many properties will cause animations to stutter.
Firstly you can check that you're not using too many animations all at once on the page: as well as being bad for performance, it is also bad for your users' experience. Multiple animations on different parts of the page will be fighting for their attention as well as potentially causing performance issues. Being aware of the number of animations will help to address both of these potential issues.
What causes janky animations?
In order to achieve a smooth 60fps animation, the browser has only 16.7ms (1000ms/60) to achieve all of the work that needs to be done per frame. If the browser can't complete all of the operations needed, it will stop and move on to the next frame, starting the calculation and redrawing process all over again. This is when we start to see dropped frames, causing janky or stuttering animations.
How to avoid janky animations
While the list of animatable properties is extensive, at the moment we can only safely animate a handful of these properties to keep within the necessary 16.7ms. These properties are transform, opacity and filter.
The reason for this is that animating any other property will cause the browser to have to repaint the page, and this is an expensive process in terms of performance and will likely take longer than 16.7ms to calculate and draw each change.
We can also give the browser a helping hand by utilising the will-change property, which gives it a heads up that a property is going to change. This enables the browser to perform some optimisations before your animation even starts.
The future of web animation performance
The new Firefox Quantum project is taking amazing strides towards making every animatable property perform well, as well as many other improvements to rendering content on the web.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
It's also worth noting that the newest versions of the iPad will play animations back at 120fps, which will reduce the time in which the browser has to calculate and paint each frame to 8.35ms.
Timing and choreography
Utilising the correct timing and delays will produce animations that look better and are easier to comprehend. When animating any elements, it's important to choose a duration that is appropriate to its context. For example, an animation that's applied to a button interaction should be short, usually less than a second.
Utilising long animations for common interactions is tedious and annoying to the user and can make your application or website feel sluggish and slow. However, providing an animation duration that is too short can cause confusion and provoke the wrong emotions and feelings for your audience. Once you have chosen a comfortable animation duration, you should use this in every aspect of your website or application.
When animating, multiple elements or property delays should be used to enhance comprehension. It's much easier to see what's happening in an animation when one thing happens at a time instead of all at once.
Next page: Learn how to animate SVG
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.
Related articles
- 5 tips for getting started in indie game development - GameMaker's winning dev shares his advice
- How to create concept art: 15 tips from a Marvel Studio artist
- How to prevent objects from overlapping in KeyShot
- The challenges of being an indie dev, "About a third of the way through the game's development, I hated the damn thing"