Photo by Emre Karataş on Unsplash

A Guide to CSS Animation — Part 1

Let’s get things moving! 🎞

Hey! 👋 So you’re interested in making things move on your websites and in your apps? This guide should help you out 👍

This post assumes you’ve never created a CSS animation before. But even if you have, there may be things you were not aware of. It does assume you have some familiarity with HTML and CSS. We’ll explore creating your first animation through to things like chaining animations.

CSS animation can be a quick concept to grasp but a big topic to cover once we really dig in. Therefore, this post is split over parts.

• Part 1: Introduces CSS animation looking at things like performance and how to inspect animations. We will also create a basic animation and look at @keyframes composition.
• Part 2: With the basics grasped, we dig into the different things we can do with the animation properties. This includes tips on things like using fill-mode and chaining animations.