CSS Animations Practice Questions with Solutions

By /

Introduction

CSS Animations allow HTML elements to move, rotate, resize, fade, and change colors automatically without using JavaScript. Unlike CSS transitions, animations can run automatically, repeat multiple times, pause, reverse direction, and include several intermediate steps using @keyframes. CSS animations are widely used for loading spinners, banners, buttons, cards, icons, and modern web interfaces. In this chapter, you’ll practice CSS animations through simple solved, CSS Animations practice questions that are easy for beginners to understand.

Question 1: Create a Simple Animation

Problem Statement

Write CSS to change a <div>‘s background color from blue to green over 2 seconds.

CSS Code

div {    width: 100px;    height: 100px;    background-color: blue;    animation: colorChange2s;}@keyframescolorChange {from {        background-color: blue;    }to {        background-color: green;    }}

Output

The <div> smoothly changes its background color from blue to green in 2 seconds.

Explanation

  • @keyframes defines the animation steps.
  • from specifies the starting state.
  • to specifies the ending state.
  • The animation property applies the animation.

Question 2: Move an Element Horizontally

Problem Statement

Write CSS to move a <div> 200px to the right.

CSS Code

div {    position: relative;    animation: moveRight2s;}@keyframesmoveRight {from {        left: 0;    }to {        left: 200px;    }}

Output

The <div> moves smoothly 200 pixels to the right.

Explanation

  • left changes the horizontal position.
  • position: relative allows the element to move using left.
  • The movement completes in 2 seconds.

Question 3: Rotate an Image

Problem Statement

Write CSS to rotate an image 360 degrees.

CSS Code

img {    animation: spin2s;}@keyframesspin {from {        transform: rotate(0deg);    }to {        transform: rotate(360deg);    }}

Output

The image rotates one complete circle.

Explanation

  • transform: rotate() rotates the image.
  • 360deg completes one full rotation.
  • This effect is commonly used for loading icons.

Question 4: Create a Fade-In Effect

Problem Statement

Write CSS to make a paragraph fade in from transparent to fully visible.

CSS Code

p {    animation: fadeIn2s;}@keyframesfadeIn {from {        opacity: 0;    }to {        opacity: 1;    }}

Output

The paragraph smoothly fades into view.

Explanation

  • opacity: 0 makes the element invisible.
  • opacity: 1 makes it fully visible.
  • Fade-in effects improve user experience.

Question 5: Enlarge a Button

Problem Statement

Write CSS to increase a button’s size from normal to 130%.

CSS Code

button {    animation: grow1.5s;}@keyframesgrow {from {        transform: scale(1);    }to {        transform: scale(1.3);    }}

Output

The button smoothly grows to 130% of its original size.

Explanation

  • scale() changes the size of the button.
  • Values greater than 1 enlarge the element.
  • This animation highlights important buttons.

Question 6: Repeat an Animation

Problem Statement

Write CSS to make a <div> continuously rotate.

CSS Code

div {    animation: spin2sinfinite;}@keyframesspin {from {        transform: rotate(0deg);    }to {        transform: rotate(360deg);    }}

Output

The <div> rotates continuously.

Explanation

  • infinite makes the animation repeat forever.
  • The animation restarts automatically after each cycle.
  • This effect is commonly used for loading spinners.

Question 7: Add an Animation Delay

Problem Statement

Write CSS to start an animation 2 seconds after the page loads.

CSS Code

div {    animation: fadeIn2s;    animation-delay: 2s;}@keyframesfadeIn {from {        opacity: 0;    }to {        opacity: 1;    }}

Output

The animation begins 2 seconds after the page loads.

Explanation

  • animation-delay postpones the start of the animation.
  • The element waits before beginning the animation.
  • Delays are useful for creating sequential effects.

Question 8: Use animation-timing-function

Problem Statement

Write CSS to make an animation start slowly and then speed up.

CSS Code

div {    animation: moveBox2sease-in;}@keyframesmoveBox {from {        transform: translateX(0);    }to {        transform: translateX(200px);    }}

Output

The <div> starts moving slowly and then speeds up.

Explanation

  • ease-in creates a slow start.
  • Timing functions control the animation speed.
  • Other values include linear, ease, ease-out, and ease-in-out.

Question 9: Keep the Final Animation State

Problem Statement

Write CSS so that a <div> remains in its final position after the animation finishes.

CSS Code

div {    animation: moveRight2sforwards;}@keyframesmoveRight {from {        transform: translateX(0);    }to {        transform: translateX(150px);    }}

Output

After the animation ends, the <div> stays 150px to the right.

Explanation

  • forwards is the value of animation-fill-mode.
  • It keeps the final animation state instead of returning to the original position.
  • This is useful for permanent visual changes.

Question 10: Use the animation Shorthand Property

Problem Statement

Write CSS using shorthand to rotate an image continuously for 3 seconds using a linear speed.

CSS Code

img {    animation: spin3slinearinfinite;}@keyframesspin {from {        transform: rotate(0deg);    }to {        transform: rotate(360deg);    }}

Output

The image rotates continuously at a constant speed.

Explanation

  • The shorthand combines the animation name, duration, timing function, and iteration count.
  • linear keeps the animation speed constant.
  • Shorthand makes CSS shorter and easier to read.

Key Takeaways

  • CSS animations are created using the @keyframes rule.
  • The animation property applies an animation to an element.
  • animation-delay controls when an animation starts.
  • animation-iteration-count or infinite repeats an animation.
  • animation-timing-function controls the animation speed.
  • animation-fill-mode: forwards keeps the final animation state.
  • The animation shorthand combines multiple animation properties.
  • CSS animations improve user engagement and modern website design.

Frequently Asked Questions (FAQs)

1. What are CSS animations?

CSS animations allow HTML elements to move, rotate, resize, fade, and change styles automatically without JavaScript.

2. Which rule is used to define a CSS animation?

Use the @keyframes rule.

Example:

@keyframesfadeIn {from {        opacity: 0;    }to {        opacity: 1;    }}

3. How do I make an animation repeat forever?

Use:

animation: spin 2sinfinite;

4. What does animation-delay do?

It specifies how long the browser waits before starting the animation.

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

It keeps the element in its final animated state after the animation finishes.

6. What is the purpose of animation-timing-function?

It controls the speed of an animation.

Common values include:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

7. Where are CSS animations commonly used?

CSS animations are commonly used for:

  • Loading spinners
  • Buttons
  • Cards
  • Icons
  • Hero sections
  • Navigation menus
  • Image galleries
  • Interactive UI components

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top