DevelopmentCSS | 4 Min Read

CSS Explained: CSS Animation Overview

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

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



Content

Latest Blog Posts

Below is my latest blog post and a link to all of my posts.

View All Posts

Content

Latest Video

Here is my YouTube Channel and latest video for your enjoyment.

View All Videos
Set Up Next.js (App Router) Authentication in Minutes with Clerk!

Set Up Next.js (App Router) Authentication in Minutes with Clerk!

Contact

Join My Newsletter

Subscribe to my weekly newsletter by filling in the form.

Get my latest content every week and 0 spam!