Keyframe animations in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a keyframe animation in CSS?

A keyframe animation in CSS lets you change styles smoothly over time by defining specific points (keyframes) with different styles. The browser fills in the changes between these points.

beginner

How do you define keyframes in CSS?

You use the @keyframes rule followed by a name and curly braces. Inside, you write percentages or keywords like from and to with style changes for each step.

beginner

What does the animation-duration property do?

It sets how long the animation takes to complete one cycle, usually in seconds or milliseconds.

intermediate

Explain the difference between from/to and percentage keyframes.

<code>from</code> is the same as 0% (start), and <code>to</code> is the same as 100% (end). Percentages let you add steps in between, like 50% for the middle of the animation.

beginner

How can you make an animation repeat forever?

Use the animation-iteration-count property and set it to infinite.

Which CSS rule is used to create keyframe animations?

A @frames

B @animation

C @keyframes

D @motion

The correct rule to define keyframe animations is @keyframes.

What does animation-duration: 3s; mean?

A Animation delays 3 seconds before starting

B Animation starts after 3 seconds

C Animation repeats 3 times

D Animation runs for 3 seconds

animation-duration sets how long one animation cycle lasts.

How do you specify the middle point of an animation?

A Use 50% in @keyframes

B Use from

C Use to

D Use 100%

You use percentages like 50% to define intermediate steps in the animation.

Which property makes an animation repeat forever?

A animation-iteration-count: infinite;

B animation-repeat: forever;

C animation-loop: always;

D animation-count: forever;

The correct property is animation-iteration-count set to infinite.

What is the difference between from and to in keyframes?

A They are not valid in keyframes

B <code>from</code> is 0%, <code>to</code> is 100%

C They are the same and mean 50%

D <code>from</code> is 100%, <code>to</code> is 0%

from means the start (0%) and to means the end (100%) of the animation.

Describe how to create a simple CSS animation that moves a box from left to right.

Think about defining start and end positions and telling the box to animate.

Explain how you can control the speed and repetition of a CSS animation.

Focus on properties that control time and loops.