Coner Murphy

Published on 11 May 2021 | 4 Minute Read

CSS Explained: CSS Keyframes Overview

CSS keyframes let us define custom animations in CSS to use across our website, here's everything you need to know about them.

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}
css

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}
css

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}
css

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}
css

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}
css

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}
css

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}
css

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}
css

!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}
css

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.



šŸ‘„

Latest Content...

What Iā€™m up to and more.

  • 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.

  • The Complete 2021 Guide to HTTP Status Codes and Their SEO Influence

    1 Jun 2021

    The Complete 2021 Guide to HTTP Status Codes and Their SEO Influence

    HTTP status codes are a vital part of the web, they allow for clear communication between clients and servers as well as influence your SEO score.

Want to read more?

View all posts here