Coner Murphy

Published on 4 May 2021 | 4 Minute Read

CSS Explained: CSS Animation Overview

CSS has some powerful properties for animations so here's everything you need to know about CSS animations.

CSS Explained: CSS Animation Overview

What are they?

CSS Animations are a way of animating elements in CSS without any external libraries or the use of JS.

CSS Animations contain 2 parts:

  1. A style describing the animation
  2. A set of keyframes that state the start and end properties of the animation.

Defining Animations

Before we can actually use animations we need to define the animation, this is done with the keyframes at-rule in CSS.

Syntax using from/to:

1@keyframes <ANIMATION NAME> {
2 from {
3 color: #000000;
4 }
5 to {
6 color: #ffffff;
7 }
8}
css

Syntax using percentages:

1@keyframes <ANIMATION NAME> {
2 0% {
3 color: #000000;
4 }
5 50% {
6 color: rgb(255, 0, 0);
7 }
8 100% {
9 color: #ffffff;
10 }
11}
css

By using percentages we can add more points into the animation, compared to the from/to method where we can only define the start and stop points.

You can also mix and match from/to and percentages as well:

1@keyframes <ANIMATION NAME> {
2 from {
3 color: #000000;
4 }
5 60% {
6 color: rgb(200, 0, 0);
7 }
8 to {
9 color: #ffffff;
10 }
11}
css

Animation Properties

There are 8 animation properties that we can use to contorl and configure the animation.

Animation properties do not control the style of the animation! That happens with Keyframes

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state

animation-name

Description: Specifies the name of the @keyframes animation that will be given to the element.

Example:

1animation-name: ANIMATION_NAME;
css

animation-duration

Description: Allows for control of the length of the animation to complete one cycle. Time given in either Seconds(s) or Milliseconds(ms).

Example:

1animation-duration: 1s;
2animation-duration: 500ms;
css

animation-timing-function

Description: Controls how the animation progresses through the keyframes by establishing an accerelation curve.

Example:

1animation-timing-function: linear;
2animation-timing-function: ease-in-out;
3animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
css

animation-delay

Description: Controls the delay between the element loading and the animation starting. Controlled in either Seconds(s) or Milliseconds(ms).

Example:

1animation-delay: 1s;
2animation-delay: 500ms;
css

animation-iteration-count

Description: Controls how many times the animation will repeat for. If given as `infinite` then the animation will repeat forever.

Example:*

1animation-iteration-count: 5;
css

animation-direction

Description: Controls the direction of the animation, starting at 0% to 100% (normal) or 100% to 0% (reverse). Or, if set to alternate will change on each completion of the animation.

Example:

1animation-direction: normal;
2animation-direction: alternate;
css

animation-fill-mode

Description: Controls the styles applying to the element after the animation has finished.

If set to `forwards` then the animation will persist the final animation styling after it finishes.

If set to `backwards` then the animation will revert back to the styling prior to the animation.

Example:

1animation-fill-mode: none;
2animation-fill-mode: forwards;
css

animation-play-state

Description: Allows for playing and pausing of an animation.

Example:

1animation-play-state: running;
2animation-play-state: paused;
css

Animation Shorthand CSS

You can set the animation properies in one line using the CSS Shorthand `animation`.

1/* @keyframes duration | easing-function | delay |
2iteration-count | direction | fill-mode | play-state | name */
3
4animation: 3s ease-in 1s 2 reverse both paused slidein;
5
6/* @keyframes name | duration | easing-function | delay */
7animation: slidein 3s linear 1s;
8
9/* @keyframes name | duration */
10animation: slidein 3s;
css

Learn More about CSS Shorthand Properties.

Setting Multiple Animations

If we use the longhand CSS animation properties covered above, we can define multiple CSS animations in one go.

1animation-name: fadeInOut, moveLeft300px, bounce;
2animation-duration: 3s;
3animation-iteration-count: 1;
css

In this example, because there is 3 animations but only one duration and iteration-count properties they will all inherit these properties.

1animation-name: fadeInOut, moveLeft300px, bounce;
2animation-duration: 2.5s, 5s, 1s;
3animation-iteration-count: 2, 1, 5;
css

In this example, because there is enough properties for all of the animations they will inherit their respective placed property.

For example, the first defined animation `fadeInOut` will inherit the first defined properties: 2.5s and 2.

1animation-name: fadeInOut, moveLeft300px, bounce;
2animation-duration: 2.5s, 5s;
3animation-iteration-count: 2, 1;
css

In this final case, as there isn't enough properties for all of the defined animations, CSS will loop through them.

For example, `fadeInOut` gets 2.5s and 2, `moveLeft300px` gets 5s and 1 and then it goes back to the start so `bounce` will get 2.5s and 2 again.

Read More / Sources

MDN Page on using CSS Animations CSS Tricks page on CSS Animations



šŸ‘„

Latest Content...

What Iā€™m up to and more.

  • How to make a flicker-free dark theme toggle with Next.js, TailwindCSS, and `next-themes`

    7 Jun 2022

    How to make a flicker-free dark theme toggle with Next.js, TailwindCSS, and `next-themes`

    Here's how to build a dark/light theme toggle in Next.js using TailwindCSS and the next-themes npm package to make it load and transition flicker-free.

  • 3 Reasons Why You Need to Design Components and Not Pages

    26 Jun 2021

    3 Reasons Why You Need to Design Components and Not Pages

    If you want to design better websites then you need to stop designing at a page level and start thinkning about components. Here's 3 reasons why.

  • 6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    26 Jun 2021

    6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    Building a Twitter audience is a great way to grow your business. So, here are 6 Twitter analytics terms you need to know and how to measure them.

Want to read more?

View all posts here