CSS Explained: CSS Keyframes Overview

Welcome back to the blog. In this post, I'm going to cover everything you need to know about keyframes in CSS. How to create and use them as well as some other quirky things that you may or may not know.

Let's get started.

What are keyframes?

The @keyframes rule controls the intermediate steps in a CSS animation by defining styles for keyframes or points along the sequence giving more control of the animation than a simple transition would provide.

Example

You can use either the from-to method for defining keyframes or use percentages.

from-to

1@keyframes slidein {
2  from {
3    transform: translateX(0%);
4  }
5
6  to {
7    transform: translateX(100%);
8  }
9}

Percentages

1@keyframes slidein {
2  0% {
3    transform: translateX(0%);
4  }
5
6  50% {
7    tranform: translateX(60%);
8  }
9
10  100% {
11    transform: translateX(100%);
12  }
13}

By using percentages we can have even more control over the animation by defining multiple points on the sequence rather than a start and finish with from-to.

Parts of a keyframe rule

To create a keyframe rule you need 4 things, these are:

1. `@keyframe`
2. `<NAME_OF_ANIMATION>`
3. Keyframe declarations
4. Styles within the declarations

Valid Keyframe lists

If a keyframe rules doesn't contain a start or end (from/to or 0%/100%) then the browser will take the existing element styles to be the start/end state to animate to.

This allows us to animate to and from initial state easily.

1.element {
2  width: 100px;
3  height: 100px;
4  background-color: blue;
5  animation: scale 2s ease infinite;
6}
7
8@keyframes scale {
9  50% {
10    scale: 2;
11  }
12}

If we was to convert this out to what is actually happening it would be:

1.element {
2  width: 100px;
3  height: 100px;
4  background-color: blue;
5  animation: scale 2s ease infinite;
6}
7
8@keyframes scale {
9  0% {
10    scale: 1;
11  }
12  50% {
13    scale: 2;
14  }
15  100% {
16    scale: 1;
17  }
18}

We would go from height/width of 100px to 200px at 50% and back to 100px at 100% but we only need to define one keyframe to do it.

Duplicate declarations

Keyframes don't cascade across keyframe declarations, so if two declarations are made then the last one encountered is used by the parser and the others are discarded.

For example, because there is 2 keyframe sets called `scale` the second one is taken and the first is discarded.

1@keyframes scale {
2  0% {
3    scale: 1;
4  }
5  50% {
6    scale: 2;
7  }
8  100% {
9    scale: 1;
10  }
11}
12
13@keyframes scale {
14  50% {
15    scale: 5;
16  }
17}

Missing Properties

If properties have been missed in a keyframe declaration they are interpolated if possible.

For example, the 50% keyframe is missing a scale property so it is interpolated by CSS.

1@keyframes scale {
2  25% {
3    scale: 1.25;
4  }
5  50% {
6    background-color: yellow;
7  }
8  75% {
9    scale: 2;
10  }
11}

If a property can't be interpolated by CSS then it is dropped from the animation.

Multiple Keyframe Declarations

In this situation, because there is 2 50% declarations the latest one is taken for the shared property (scale) but because only the first declaration contains (background-color) that value is taken from their.

All keyframes at the given declaration is considered and the newest one of the duplicate deceleration is taken.

In this example the 50% keyframe would be: `scale 1, background-color: red;`

1@keyframes scale {
2  50% {
3    scale: 2;
4    background-color: red;
5  }
6  50% {
7    scale: 1;
8  }
9}

Rules do cascade across the same declaration as well.

In this case, in the first declaration there is 2 `background-color` properties like normal CSS the lowest one is taken. So in this case the square would animate to yellow.

1@keyframes scale {
2  50% {
3    scale: 2;
4    background-color: red;
5    background-color: yellow;
6  }
7  50% {
8    scale: 1;
9  }
10}

!important in keyframes

If `!important` is used in a declaration of a property, that property is ignored.

1@keyframes scale {
2  50% {
3    scale: 2;
4    background-color: red;
5    background-color: yellow !important;
6  }
7}

So even though the `background-color: yellow` is the lowest in the cascade and would normally be the one used overriding `background-color: red` because we used the `!important` qualifier that property is ignored. Therefore, `background-color: red` becomes the lowest in the cascade and is used in the animation.