Create cool UI animations with CSS

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. 

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

TOPICS
Steven Roberts

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.

Latest in UX & UI
A screenshot of the new YouTube UI
Yes, YouTube has a new UI. Yes, it's terrible
Adobe XD logo
It seems Adobe's given up on UI design (for now)
UX revolution
From 2D to 3D: How brands can harness the latest UX/UI revolution
Screenshot of busy webpage full of graphics and different fonts
Designing websites for accessibility: 5 common errors to avoid
Free Figma subscription offer with a UX design course
Get a free Figma Pro subscription with our online UX design course
A graphic saying 'an insider's guide to UX and UI with Figma, on Wednesday 1 November 1-2pm (GMT)
Free webinar: An insider's guide to UX and UI with Figma
Latest in Features
A group of people taking a selfie using the iPhone 16e.
7 reasons the iPhone 16e is a huge improvement on the iPhone SE 3
AI trends predictions 2025
How to use AI properly – 5 tips to help you get the most from the tech
How we made Ada; A digitally animated scene depicts two women in a grand, antique-style library, with one pointing.
How we made the "lush, handmade look" of animated series Ada
Cartoons of the 1950s - best animated movies of the 50s; A heartwarming animated scene depicts two canine characters sharing a meal of spaghetti and meatballs at a table outdoors.
Cartoons of the 1950s – the best animated movies from Lady and the Tramp to Animal Farm
Making Paddington in Peru's character animation; a small bear in a red had sat in a jungle
Paddington in Peru's animation works because of one small detail
Making Paddington in Peru's ruined city; An elevated, high-angle view showcases a section of a stone ruin, likely a historical site, with a person navigating the crumbling structures.
"It was one of the most complicated scenes we had to do" – how Paddington in Peru's Citadel was made