Create cool UI animations with CSS
Your guide to using CSS transitions, keyframes and SVG animation to create animations that delight.
CSS keyframes are used for complex or repeatable animations. They enable us to define multiple property values to animate between. Keyframe animations can be reused and repeated, unlike CSS transitions.
CSS keyframe animations are defined using the @keyframes syntax. This works much like a media query where we nest elements inside of the @ statement. Inside the keyframe declaration we have two options: we can use the keyword to and from or we can define our timeline using percentages.
Keyword animations
When the animation we're creating only has two points to animate between, we can use the to and from syntax, in fact we can use just to, providing the original property value is set on the element we're going to be animating.
#record {
transform: rotate(0deg);
animation: rotate 1s;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
Percentage animations
When creating animations where we need to define more than one point to animate, we can use percentages. This enables us to have precise control over our animation.
@keyframes flash {
25% { opacity: 1; }
27% { opacity: 0.4; }
29% { opacity: 1; }
31% { opacity: 0.4; }
75% { opacity: 1; }
}
Applying an animation
Animation in CSS has a number of properties we can set in order to have precise control over the playback of our keyframe animations. Some, like animation-duration, animation-delay, animation-iteration-count, animation-play-state and animation-name are all fairly self-explanatory, while some of the other properties can be a little trickier to learn and utilise to their full potential.
animation-timing-function
Timing functions in animation are the same as transitions – we can use either keywords or set a custom timing function by using the cubic-bezier value. Take a look at a full list of timing keywords.
animation-direction
When applying our animations, we have the ability to play them back in a number of ways. The default value is normal, which will play the animation forwards. We can also play the animation in reverse or alternate the animations playing forwards and backwards.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
animation-fill-mode
The fill mode value enables us to choose what should happen at the end of an animation to the value that we have changed. For example, setting the value to forwards will keep the property values from the end of the animation, whereas the default value none will return the elements to their original state after the animation has finished.
Animation shorthand
All of the animation properties can be combined into a shorthand statement using the 'animation' property. We are free to omit the values we do not need and want to leave as the default values.
animation: duration || timing-function ||
delay ||
iteration-count || direction || fill-mode ||
play-state || name;
animation: 500ms linear infinite flash;
Next page: Learn how to manage the performance of your animations
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.











