4: CSS Keyframe Animations - Animating at Points in Time

Last updated
Save as PDF

Page ID: 20101

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Keyframes

Back in the Golden Age of animation, head animators would lead a team of junior animators as they worked on a new cartoon or animated feature film. The head animators would create keyframes. Keyframes are the critical points or poses in an animation.

Definition: Keyframes

Keyframes are the critical points or poses in an animation.

If a head animator drew keyframes for a man's walking pose, they would probably draw him standing still, in full stride, and at rest. You can see what this might look like in the below. I have added numbers below the poses drawn by the original artist because they will come in handy later.

Example of Keyframes
Image credit: Valerii Egorov from Alamy Stock Vector

The head animator would then pass those keyframes off to the junior animators. The junior people would create the frames that were in between the keyframes. This process is known as tweening.

Definition: Tweening

The creation of frames between important poses.

In the image below, you can see the original keyframes that are marked with the numbers. However, you can also see all of the new 'tween' poses between each keyframe to make the animation sequence smooth.

Example of Tweening
Image credit: Valerii Egorov from Alamy Stock Vector

In digital animations, we still use those exact words for the process. However, instead of a team of junior animators that create the 'tweens,' we now have digital applications that can help us with that.

In CSS animations, keyframes still have much of that idea from the Golden Age of animation. We have specific points at which we want things to happen. The syntax is as follows:¹

Syntax 1

@keyframes myName {

keyframes-selector {css-styles;}

}

Let's talk about what the syntax means.¹

@keyframes - This is the required rule name.
myName - This is something that is totally made up by you. Make it something that you will remember easily.
keyframes-selector - This will define the time when you want the action to happen. It is specified in percentages or in words like "from" and "to."¹ You must have at least one of these.
css-styles - The CSS style properties and values that you want to animate. Again, you must have at least one of these.

Below is what one keyframe rule might look like. The 'moveDown' text was the name that I made up for the example. 0% identifies the starting position. 50% identifies the mid-way point. 100% shows what should happen at the end of the animation. Best practice dictates that you must have at least the 0% and the 100% positions defined.

There is a second part that you must have to bind it to the element you want to animate. It looks like what you see below. Notice the 'moveDown' name is present. This name must match whatever you make up in the @keyframes rule exactly.

Syntax 2

div { position: relative; animation: moveDown 5s infinite; }

Here is what this means:¹

div - The name of the element you want to animate.
position: relative; - The position property must be defined to get the animation to work properly if you need to move it across the stage in some fashion. The property's value doesn't matter as much as just having it on the page.
animation - This is where you tie the keyframes rule to the specific element being animated, set how long the overall animation should take, and how many times the animation should loop (aka - animation iteration count). You can set it to a specific number or have it loop infinitely.

Exercise \(\PageIndex{1}\)

In between the curly braces for the div, add the following:
1. position: fixed;
2. animation: diagonalMove 5s infinite;
In the @keyframes rule, do the following steps
1. Set the name of the animation to diagonalMove. (Check the spelling carefully!)
2. Create a keyframe at the beginning (0%). Add values so that the square starts at the top left corner, has a yellow background color, and cannot be seen.
3. Add a second keyframe midway through the animation (50%). Add values so that the square is now 100px from the top, 100px from the left, and has a red background color.
4. Add a final keyframe at the end of the animation (100%). Add values so that the square returns to the top left corner, has a blue background color, and can be fully seen on the page.

See the Pen Keyframes by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.

Answer

1. div { position: fixed; animation: diagonalMove 5s infinite; }

2. @keyframes diagonalMove {
0% {top: 0px; left: 0px; background: yellow; opacity: 0;}
50% {top: 100px; left: 100px; background: red;}
100% {top: 0px; left: 0px; background: blue; opacity: 1;}
}

Footnotes

1. “CSS @Keyframes Rule.” CSS @Keyframes Rule, W3Schools, https://www.w3schools.com/cssref/css...-keyframes.php.