Tutorials › CSS Mastery › Animations

Animations

5 min read Quiz at the end

@keyframes define animation steps. Apply with the animation property: animation: name duration easing. Set iteration-count: infinite for loops. fill-mode: forwards keeps the final state after the animation ends.

CSS Animations

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.card {
    animation: fadeIn 0.5s ease forwards;
}

.spinner {
    animation: spin 1s linear infinite;
}

← Transitions Next: Transform →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which rule defines CSS animation keyframes?

💡 @keyframes defines the animation steps; animations are applied with the animation property.

2. animation-iteration-count: infinite means:

💡 infinite makes the animation repeat forever.

3. What does animation-fill-mode: forwards do?

💡 forwards retains the styles of the last keyframe after the animation completes.

4. Which value plays animation in reverse?

💡 animation-direction: reverse plays the @keyframes in reverse.

5. animation-play-state: paused does:

💡 animation-play-state: paused freezes the animation at its current point.

Quick Access

Animations

CSS Animations

Test your understanding before moving on