CSS Transitions Practice Questions with Solutions

By /

Introduction

CSS Transitions allow you to create smooth animations when the value of a CSS property changes. Instead of changing instantly, properties such as color, background, width, height, opacity, and transform can transition gradually over a specified duration. CSS transitions improve user experience by making websites feel more interactive and modern. In this chapter, you’ll practice CSS transitions through simple solved CSS Transitions practice questions that are easy for beginners to understand.

Question 1: Create a Simple Background Color Transition

Problem Statement

Write CSS to smoothly change a button’s background color over 0.5 seconds when the mouse pointer hovers over it.

CSS Code

button {    background-color: blue;    transition: background-color0.5s;}button:hover {    background-color: green;}

Output

When the mouse hovers over the button, the background color changes smoothly from blue to green.

Explanation

  • transition creates a smooth effect.
  • background-color is the property being animated.
  • 0.5s specifies the transition duration.

Question 2: Change Width Smoothly

Problem Statement

Write CSS to increase a <div>‘s width from 200px to 300px when hovered.

CSS Code

div {    width: 200px;    transition: width1s;}div:hover {    width: 300px;}

Output

The <div> smoothly expands from 200px to 300px.

Explanation

  • transition: width 1s; animates the width.
  • The width changes gradually over one second.
  • This effect is useful for interactive cards and menus.

Question 3: Change Opacity Smoothly

Problem Statement

Write CSS to reduce an image’s opacity when hovered.

CSS Code

img {    opacity: 1;    transition: opacity0.4s;}img:hover {    opacity: 0.5;}

Output

The image smoothly becomes 50% transparent on hover.

Explanation

  • opacity controls an element’s transparency.
  • The transition creates a smooth fade effect.
  • This is commonly used for image galleries.

Question 4: Rotate an Element with a Transition

Problem Statement

Write CSS to rotate an image by 45 degrees when hovered.

CSS Code

img {    transition: transform0.6s;}img:hover {    transform: rotate(45deg);}

Output

The image smoothly rotates 45 degrees when the mouse pointer is placed over it.

Explanation

  • transform is the animated property.
  • rotate() changes the element’s angle.
  • The transition creates a smooth rotation effect.

Question 5: Scale a Button Smoothly

Problem Statement

Write CSS to enlarge a button when hovered.

CSS Code

button {    transition: transform0.3s;}button:hover {    transform: scale(1.2);}

Output

The button smoothly becomes 20% larger when hovered.

Explanation

  • scale() increases the button size.
  • transform is animated using transition.
  • This effect is commonly used for call-to-action buttons.

Question 6: Transition Multiple Properties

Problem Statement

Write CSS to smoothly change both the background color and width of a <div> when hovered.

CSS Code

div {    width: 200px;    background-color: blue;    transition: width0.5s, background-color0.5s;}div:hover {    width: 300px;    background-color: green;}

Output

The <div> smoothly changes its width and background color at the same time.

Explanation

  • Multiple properties can be animated by separating them with commas.
  • Both transitions start and finish together.
  • This creates smoother interactive effects.

Question 7: Use the ease-in Timing Function

Problem Statement

Write CSS to make a button’s background color transition start slowly.

CSS Code

button {    transition: background-color0.5sease-in;}button:hover {    background-color: orange;}

Output

The button’s background color changes slowly at the beginning, then speeds up.

Explanation

  • ease-in starts the animation slowly.
  • The transition accelerates toward the end.
  • Timing functions control the animation speed.

Question 8: Add a Transition Delay

Problem Statement

Write CSS to wait 1 second before changing a button’s background color.

CSS Code

button {    transition: background-color0.5s1s;}button:hover {    background-color: red;}

Output

The button waits 1 second before the color transition begins.

Explanation

  • The first value is the transition duration.
  • The second value is the delay.
  • Delays are useful for creating staged animations.

Question 9: Use the transition Shorthand Property

Problem Statement

Write CSS using shorthand to animate a <div>‘s width over 0.8 seconds with an ease-out timing function.

CSS Code

div {    transition: width0.8sease-out;}div:hover {    width: 350px;}

Output

The <div> smoothly expands, slowing down as the animation finishes.

Explanation

  • The shorthand combines the property, duration, and timing function.
  • ease-out starts quickly and slows near the end.
  • Shorthand keeps CSS concise and readable.

Question 10: Create a Card Hover Effect

Problem Statement

Write CSS to slightly enlarge a card and add a shadow when the mouse pointer hovers over it.

CSS Code

.card {    transition: transform0.4s, box-shadow0.4s;}.card:hover {    transform: scale(1.05);    box-shadow: 08px16pxgray;}

Output

The card smoothly becomes slightly larger and displays a shadow when hovered.

Explanation

  • transform: scale() enlarges the card.
  • box-shadow adds depth.
  • Transition animates both properties smoothly.

Key Takeaways

  • CSS transitions create smooth changes between property values.
  • transition defines which property should animate.
  • Multiple properties can transition simultaneously.
  • Timing functions such as ease, ease-in, ease-out, and linear control animation speed.
  • Transition delays postpone the start of an animation.
  • The shorthand syntax combines multiple transition settings.
  • Transitions improve user experience and create modern interfaces.
  • Hover effects are one of the most common uses of CSS transitions.

Frequently Asked Questions (FAQs)

1. What are CSS transitions?

CSS transitions create smooth animations when CSS property values change.

2. Which CSS property enables transitions?

Use the transition property.

Example:

button {    transition: background-color0.5s;}

3. Can I animate multiple properties?

Yes.

Example:

transition: width 0.5s, background-color 0.5s;

4. What is a timing function?

A timing function controls the speed of a transition.

Common timing functions include:

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

5. What is a transition delay?

A transition delay specifies how long to wait before the animation begins.

Example:

transition: background-color 0.5s 1s;

6. What is the shorthand syntax for transitions?

Example:

transition: width 0.8sease-out;

7. Where are CSS transitions commonly used?

CSS transitions are commonly used for:

  • Buttons
  • Cards
  • Images
  • Navigation menus
  • Forms
  • Icons
  • Hover effects
  • Interactive UI components

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

Related Posts

Scroll to Top