A Guide to CSS Animation - Part 1
Tags: animation, css, webdev, beginners
Published: 2019-12-20 18:20:48

> 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 👍

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.

![A basic chained animation of the word CSS](https://thepracticaldev.s3.amazonaws.com/i/ib20yjm5dzcvd8nkzqvt.gif)

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](https://dev.to/jh3y/a-guide-to-css-animation-part-2-2hjo): 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.

  [![Link to part 2](https://thepracticaldev.s3.amazonaws.com/i/5x1glkjlwud45768m1b4.png)](https://dev.to/jh3y/a-guide-to-css-animation-part-2-2hjo)

- [Part 3](https://dev.to/jh3y/a-guide-to-css-animation-part-3-3g20): We wrap things up with some bonus topics like using CSS variables and hooking in from `JavaScript`. We also discuss whether we should even use CSS animation at all. That’s right, it’s not always the best option. But there’s a benefit to understanding the foundations and alternatives.

  [![Link to part 3](https://thepracticaldev.s3.amazonaws.com/i/yhn46zgwfzm4z7ma9qy1.png)](https://dev.to/jh3y/a-guide-to-css-animation-part-3-3g20)
  

# Before we get started

All the code is available in this CodePen collection 🤓

[![Link to CodePen collection of demos](https://thepracticaldev.s3.amazonaws.com/i/jqssaberzcdexpoqwzce.png)](https://codepen.io/collection/nMpBQm/)

This means all the examples can be forked, downloaded, edited, etc. 👍

The code is also available on Github

[![Link to Github repo](https://thepracticaldev.s3.amazonaws.com/i/g2szs1hogdfmgghl3dxo.png)](https://github.com/jh3y/a-guide-to-css-animation)


For all animations, we are using a single `div` element unless stated otherwise. The basic markup comprises of something like the following;

```html
<html>
  <head>
    <title>Our first animation</title>
    <style>
     * {
       box-sizing: border-box;
     }
     html, body {
       align-items: center;
       background-color: rebeccapurple;
       display: flex;
       justify-content: center;
       margin: 0;
       padding: 0;
     }
     div {
       background-color: #2EEC71;
       height: 100px;
       width: 100px;
     }
    </style>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div />
  </body>
</html>
```

The goal of this guide is to make you comfortable with creating your own CSS animations from scratch! 💪

-----------

# So, why animate?

To improve usability and general user experience. But that does not mean animation should be everywhere in your sites. There are times and places.

![Animated transition that improves UX](https://thepracticaldev.s3.amazonaws.com/i/6x6ame7kiwthajqayrk7.gif)

With animation, we can do things such as draw a users' attention to something or direct them through a flow. Consider loading animations or page transition effects for example.

# What can we animate?

Before we start creating animations, we need to know which properties we can animate. We can’t animate every property. The following MDN article lists properties that we can animate.

[![Link to MDN docs](https://thepracticaldev.s3.amazonaws.com/i/mcypemz6h5y6u3cdop8a.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)


Lea Verou also has a great demo page for animatable properties.

[![Link to Lea Verou demos](https://thepracticaldev.s3.amazonaws.com/i/40hhcn6pjh48a1otyxcn.png)](https://leaverou.github.io/animatable/)

## Property performance

Out of the animatable properties, we may choose to animate some over others due to performance.

For example, animating an element's position will be better handled using `transform`. This is because the GPU can handle the heavy lifting when animating that property. Animating some properties will trigger layouts to take place 👎

The following article is great for understanding animation performance 👍

[![Link to article on HTML5Rocks](https://thepracticaldev.s3.amazonaws.com/i/nxqifqaonocaqh57romb.png)](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)

----------

With all that out of the way, let’s get started 💪

# Our first animation
Let’s dig right in and create our first animation ⛏

For this animation, we will make an element spin 360 degrees. Riveting stuff I know 😅 But we need to start somewhere!

![A basic animation of a div spinning round once](https://thepracticaldev.s3.amazonaws.com/i/rn1988hobz0eed6n8o9x.gif)

First, we create our animation using the `@keyframes` rule. The `@keyframes` rule takes the following structure.

```css
@keyframes [NAME] {
  [ KEYFRAME SELECTOR ] { CSS STYLES }
}
```

`animation-name` is the name we give to our animation. You can have one or many keyframe selectors 👍

We will name our animation `spin`. To spin our element we can use the `transform` property and `rotate` from `0deg` to `360deg`. We use two keyframe selectors. One to define the start of our animation(`from`) and one for the end of our animation(`to`). `from` and `to` keywords are equivalent to `0%` and `100%`.

```css
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

We can take this a little further. The styles under the `from` keyframe selector match the initial `transform` of our element. Therefore, the keyframe selector is redundant. We can remove it.

```css
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
```

Now, we need to apply that animation to our element. We use the `animation-name` and `animation-duration` properties 👍

```css
div {
  animation-duration: 2s;
  animation-name: spin;
}
```

Here we are telling our element to use the animation `spin` with a duration of 2 seconds. The duration can be set in either millisecond(`ms`) or seconds(`s`).

Loading that up in a browser should give us something like

{% codepen https://codepen.io/jh3y/pen/PazNpy %}

Our first animation 🎉

From that first animation, we have enough to go off and start creating cool animations 😎 But stick around to get a full grasp of what else we can achieve 💪

-------------

# Animations inspector

We have created our first animation. Now seems like a great time to introduce the `Animations` inspector in `Google Chrome`.

Open up the animation in `Google Chrome` and open up the `Developer Tools`. Open up the `Animations` panel by going into `More Tools`. If the `Animations` panel says “Listening for animations…”, refresh the page.

After refreshing, we should see something in the `Animations` panel, that’s our animation!

![Screenshot of using the Animations inspector](https://thepracticaldev.s3.amazonaws.com/i/jm6w0v8j3crn6ew670wi.png)

Click the animation and we are able to inspect it. Now as our animation isn’t particularly complex, there isn’t much to inspect. But with the Animations Inspector, we can do various things. We can experiment with durations and delays as well as altering playback speed. Most importantly, we can replay our animations without having to refresh the entire page 😅

![User flow of inspecting an animation with Chrome Dev Tools](https://thepracticaldev.s3.amazonaws.com/i/rnbna9fgnmzkiekvzvon.gif)

This becomes particularly useful when we have many animations. Whether it be for different elements or on one element.

Read more about the `Animations` inspector in the following article.

[![Link to Google Developers site](https://thepracticaldev.s3.amazonaws.com/i/ich0pksqnmy8z9vck8qw.png)](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations)

Throughout this guide, I recommend using the inspector when checking out the [demos](https://codepen.io/collection/nMpBQm/) 👍 

--------

# @keyframes
We put together our first `@keyframes` rule in our `spin` animation.

There isn’t much to `@keyframes`. After specifying an animation name, we structure our animation within keyframe selectors. The keyframe selector specifies a percentage of the animation duration. Or, as mentioned before, we can use the `from` and `to` keywords that are equal to `0%` and `100%`.

Each selector defines styles that should apply at that point of the animation. If we have selectors that specify the same CSS styles, we can group them together.

Let’s start with a basic example. Consider the animation of an element moving around the path of a square.

![Element animating along the path of a square](https://thepracticaldev.s3.amazonaws.com/i/zs4u3u9q4z3limye0fjb.gif)

We will call our animation `squarePath`, very creative I know 😅

For this example, there will be four positions for our element. For every side of the square, we use a quarter of the animation. Because our start and finish position will be the same, we can group those keyframe selectors 👍

```css
@keyframes squarePath {
  0%, 100% {
    transform: translate(-100%, -100%);
  }
  25% {
    transform: translate(100%, -100%);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(-100%, 100%);
  }
}
```

Apply the `animation-name` and `animation-duration` to our element 🎉

```css
div {
  animation-duration: 2s;
  animation-name: squarePath;
}
```

And that’s it! We have an element moving along the path of a square 🎉

{% codepen https://codepen.io/jh3y/pen/QxENVW %}

----------

# That’s it for Part 1 🤓

We’ve taken a look at the basics of creating and applying animations to our elements. We can also inspect our animations and tweak them in the browser 💪

Although that will be enough to get up and running with CSS animation, there’s a lot more to it! I hope you’ll join me in [Part 2](https://medium.com/@jh3y/a-guide-to-css-animation-part-2-2cd422f78567) where we dig deeper into applying animations and the associated tips and tricks.

  [![Link to part 2](https://thepracticaldev.s3.amazonaws.com/i/5x1glkjlwud45768m1b4.png)](https://dev.to/jh3y/a-guide-to-css-animation-part-2-2hjo)



Remember, all the code is available in the following CodePen collection 👍

[![Link to CodePen collection of demos](https://thepracticaldev.s3.amazonaws.com/i/jqssaberzcdexpoqwzce.png)](https://codepen.io/collection/nMpBQm/)

As always, any questions or suggestions, please feel free to leave a response or [tweet me 🐦](https://twitter.com/@jh3yy)! Be sure to connect with me on the socials! 😎