Chapter 18 Advanced 60 Questions

Practice Questions — CSS Transitions and Hover Effects

← Back to Notes
10 Easy
16 Medium
8 Hard

Topic-Specific Questions

Question 1
Easy
What is a CSS transition?
It smooths a style change.
A smooth animation from one style value to another over a specified duration, instead of an instant change.
Question 2
Easy
What are the four transition sub-properties?
Property, duration, timing, delay.
transition-property, transition-duration, transition-timing-function, transition-delay
Question 3
Easy
What does this do?
.btn {
  background: red;
  transition: background 0.5s;
}
.btn:hover {
  background: blue;
}
Smooth color change on hover.
The button smoothly fades from red to blue over 0.5 seconds when hovered, and fades back to red over 0.5 seconds when the mouse leaves.
Question 4
Easy
What is the default transition-timing-function?
Four letters.
ease
Question 5
Easy
How do you transition multiple properties?
Comma-separated list.
transition: background 0.3s, transform 0.5s, box-shadow 0.4s;
Question 6
Medium
What is wrong with this code?
.modal {
  display: none;
  transition: display 0.3s;
}
.modal.open {
  display: block;
}
display is not animatable.
display cannot be transitioned. It is a discrete property with no intermediate values. The element appears instantly.
Question 7
Medium
What is wrong with this?
.panel { height: 0; transition: height 0.3s; }
.panel.open { height: auto; }
auto cannot be animated.
You cannot transition to or from height: auto. The browser does not know the target pixel value to animate to. The panel snaps open.
Question 8
Medium
Why put the transition property on the base state, not inside :hover?
Think about hovering out.
If the transition is only on :hover, it applies when hovering IN but not when hovering OUT — the hover-out is instant. Putting it on the base state makes it apply in both directions.
Question 9
Medium
What does transition: all 0.3s ease mean?
Animate every property.
Every animatable CSS property that changes will transition over 0.3 seconds using the ease timing function.
Question 10
Medium
What is cubic-bezier()?
Custom timing curve.
A function that creates a custom acceleration curve for a transition. It takes four control points that define the shape of the curve.
Question 11
Medium
What does this do?
.card {
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-8px);
}
Classic lift effect.
On hover, the card smoothly rises 8 pixels upward over 0.3 seconds, creating a lift effect.
Question 12
Medium
What is the purpose of cursor: pointer?
Visual feedback.
It changes the mouse cursor to a hand icon when hovering, signaling to users that the element is clickable.
Question 13
Hard
Which timing function is best for elements appearing or entering the screen?
Fast start, slow end.
ease-out
Question 14
Hard
What does will-change: transform do?
Performance hint.
It tells the browser in advance that the transform property is going to animate, so the browser can optimize by placing the element on its own GPU layer.
Question 15
Hard
What does this do?
.btn {
  transition: background 0.3s 0.1s;
}
Third value is the delay.
The background animates over 0.3 seconds, but only AFTER a 0.1-second delay.

Mixed & Application Questions

Question 1
Easy
Which CSS property creates a smooth animation between state changes?
Not animation — the other one.
transition
Question 2
Easy
How do you write a transition duration of 400 milliseconds?
Use ms or decimal s.
400ms or 0.4s
Question 3
Medium
Why is transitioning transform and opacity considered the 'most performant'?
GPU-accelerated.
Modern browsers can animate transform and opacity on the GPU without triggering layout recalculation or repaint. Other properties (like width, height, top) cause layout or paint work on the CPU, which is slower.
Question 4
Medium
What is wrong with this hover effect?
.img { width: 200px; }
.img:hover {
  width: 250px;
  transition: width 0.3s;
}
Where is the transition?
The transition is on :hover, so it only applies when hovering IN. When the mouse leaves, the image snaps back instantly instead of shrinking smoothly.
Question 5
Medium
What is the difference between :hover and :active?
One is mouse over; the other is mouse pressed.
:hover applies when the mouse is over the element. :active applies when the element is being actively clicked (mouse button held down).
Question 6
Medium
What is ease-in-out?
Slow start AND slow end.
A timing function that starts slow, speeds up in the middle, and slows down at the end.
Question 7
Hard
Can you transition between two different display values?
No, but there is a workaround.
No. display is a discrete property. Use opacity and visibility for fade in/out effects instead.
Question 8
Hard
What is the purpose of transform-origin?
Anchor point for transforms.
It sets the pivot point for transforms. Default is center. You can make rotations and scales originate from any point (like top-left, bottom-right, or specific coordinates).
Question 9
Medium
Which hover effect uses the least CPU?
GPU-friendly properties.
Effects using transform and opacity, because both are GPU-accelerated and do not trigger layout recalculation.
Question 10
Medium
Why are micro-interactions (small hover effects) important in modern UI?
User feedback.
They give users immediate visual feedback that the interface is responding to their actions, which builds trust and makes interfaces feel alive and polished. Instant changes feel glitchy; smooth transitions feel deliberate.
Question 11
Easy
Which pseudo-class applies when the mouse is over an element?
Starts with colon.
:hover
Question 12
Medium
How would you delay a transition by half a second?
Fourth shorthand value.
transition: background 0.3s ease 0.5s;
Question 13
Hard
Why should you avoid transition: all in production code?
Performance and predictability.
Because it animates EVERY animatable property change, including ones you did not intend. It can also be slightly less performant than listing specific properties. Being explicit is more predictable and often faster.
Question 14
Hard
What is the difference between :hover and :focus?
Mouse vs keyboard.
:hover applies when the mouse pointer is over the element. :focus applies when the element receives keyboard focus (e.g., tabbed to). For accessibility, always style :focus AND :hover together.
Question 15
Medium
Should you use transitions on a mobile site even though there is no hover?
State changes happen on taps too.
Yes. Transitions run on ANY state change, not just hover. Taps, focus, class toggles via JavaScript, media query changes — all benefit from transitions. They make mobile UIs feel smooth and responsive.
Question 16
Easy
What is linear timing?
Constant speed.
The animation progresses at a constant speed from start to finish — no acceleration or deceleration.
Question 17
Easy
What does :hover do on a touch device?
Think about how touch works.
On touch devices, :hover typically activates on tap and stays until the user taps somewhere else. It can feel awkward, which is why touch interactions often prefer :active or JavaScript events.
Question 18
Medium
How would you create a 'button press' effect that happens on click?
Use :active.
Use the :active pseudo-class with a small scale-down or translateY on click. Example: .btn:active { transform: translateY(2px) scale(0.98); } combined with a transition for smoothness.
Question 19
Hard
Why might a transition not play even though the property was changed?
Common bug: styles changed synchronously without the browser rendering the initial state.
If you set the initial and final values in the same synchronous code block (e.g., applying a class immediately after creating the element), the browser may only render the final state and skip the transition.

Multiple Choice Questions

MCQ 1
What is a CSS transition?
  • A. A JavaScript animation
  • B. A smooth animation between two state values over time
  • C. A page transition between URLs
  • D. A CSS import statement
Answer: B
B is correct. Transitions smoothly animate property changes between a base state and a new state (like on hover).
MCQ 2
Which is the shorthand syntax?
  • A. transition: background 0.3s ease;
  • B. transition-all: 0.3s;
  • C. animate: background 0.3s;
  • D. transition: background, 0.3s;
Answer: A
A is correct. The shorthand order is property duration timing-function delay.
MCQ 3
Which pseudo-class applies when hovering with a mouse?
  • A. :over
  • B. :hover
  • C. :mouse
  • D. :pointer
Answer: B
B is correct. :hover matches while the user's pointer is positioned over the element.
MCQ 4
Which of these CANNOT be transitioned?
  • A. opacity
  • B. transform
  • C. display
  • D. background-color
Answer: C
C is correct. display is a discrete property with no intermediate values. Use opacity + visibility for show/hide animations.
MCQ 5
What is the default transition-timing-function?
  • A. linear
  • B. ease
  • C. ease-in
  • D. cubic-bezier
Answer: B
B is correct. If you do not specify a timing function, the browser uses ease.
MCQ 6
Which timing function is best for elements entering the screen?
  • A. linear
  • B. ease-in
  • C. ease-out
  • D. step-end
Answer: C
C is correct. ease-out starts fast and slows down, feeling natural for things coming to rest.
MCQ 7
How do you transition multiple properties with different durations?
  • A. transition: background 0.3s and transform 0.5s;
  • B. transition: background 0.3s, transform 0.5s;
  • C. transition: background 0.3s; transform 0.5s;
  • D. transition-multi: background 0.3s, transform 0.5s;
Answer: B
B is correct. Use a comma to separate multiple property/duration pairs.
MCQ 8
Why should the transition be on the BASE state, not :hover?
  • A. It is faster
  • B. So the animation works both on hover IN and hover OUT
  • C. CSS syntax requires it
  • D. It saves memory
Answer: B
B is correct. A transition on the base state applies to any change to that property. If it is only on :hover, the hover-out is instant.
MCQ 9
Which is BEST for animating show/hide effects?
  • A. transition: display 0.3s
  • B. opacity + visibility
  • C. width 0 to width auto
  • D. font-size 0 to font-size 16px
Answer: B
B is correct. opacity handles the fade and visibility removes the element from pointer events and accessibility after fading.
MCQ 10
What does cursor: pointer do?
  • A. Moves the cursor to a specific pixel
  • B. Changes the mouse cursor to a hand icon on hover, signaling clickability
  • C. Creates a custom cursor image
  • D. Disables the cursor
Answer: B
B is correct. It changes the cursor to the hand pointer, visually indicating the element is clickable.
MCQ 11
What unit cannot be used for transition-duration?
  • A. s (seconds)
  • B. ms (milliseconds)
  • C. px (pixels)
  • D. 0s
Answer: C
C is correct. Duration is time, not distance. Use seconds or milliseconds.
MCQ 12
Why is animating transform and opacity the most performant?
  • A. They are shorter to type
  • B. They are GPU-accelerated and do not trigger layout recalculation
  • C. They were added last to CSS
  • D. They use 32-bit colors
Answer: B
B is correct. Modern browsers handle transform and opacity on the GPU without triggering layout or paint, enabling smooth 60fps animations.
MCQ 13
What does transition: all 0.3s ease 0.5s mean?
  • A. Animate all properties for 0.3s, delayed by 0.5s
  • B. Animate all properties for 0.5s, delayed by 0.3s
  • C. Sync 0.3s and 0.5s
  • D. Invalid syntax
Answer: A
A is correct. In the shorthand, the first time is duration (0.3s) and the second is delay (0.5s).
MCQ 14
What is cubic-bezier(0.68, -0.55, 0.27, 1.55)?
  • A. A color function
  • B. A custom easing curve with control points that creates a back-and-overshoot effect
  • C. A grid template
  • D. A function for random values
Answer: B
B is correct. cubic-bezier() takes four control points defining a custom curve. Values outside 0-1 (like -0.55 and 1.55) create overshoot effects.
MCQ 15
Which property animates the movement, scale, or rotation of an element most efficiently?
  • A. position
  • B. transform
  • C. margin
  • D. float
Answer: B
B is correct. transform uses the GPU and is the most performant way to move, scale, or rotate elements.
MCQ 16
How can you animate an expandable panel from 0 to its content height?
  • A. transition height 0 to auto
  • B. Use max-height with a value larger than the expected content
  • C. Use display: none to display: block
  • D. Use visibility only
Answer: B
B is correct. max-height can be transitioned and will cap the height at the content's natural size when the transition is complete.
MCQ 17
What is the purpose of will-change?
  • A. Lock a property so it cannot change
  • B. Hint to the browser which properties will animate so it can optimize
  • C. Mark a property as required
  • D. Cache the current value
Answer: B
B is correct. will-change tells the browser to prepare optimizations (like placing the element on its own GPU layer). Use sparingly.
MCQ 18
What does :focus target?
  • A. The first element on the page
  • B. The element that currently has keyboard or input focus
  • C. Elements being scrolled
  • D. The hovered element
Answer: B
B is correct. :focus matches elements with keyboard focus (e.g., tabbed to). Always style :focus alongside :hover for accessibility.
MCQ 19
Which timing function creates a constant speed throughout the animation?
  • A. ease
  • B. linear
  • C. ease-out
  • D. cubic-bezier
Answer: B
B is correct. linear has no acceleration curve — it is the same speed from start to finish.
MCQ 20
Why should you avoid transitioning width or left/top?
  • A. They are deprecated
  • B. They trigger layout recalculation and repaint, causing jank. Prefer transform instead.
  • C. They do not work in transitions
  • D. They only work on text
Answer: B
B is correct. Properties like width, left, top, margin trigger layout work every frame. transform runs on the GPU and avoids layout, making it much smoother.

Coding Challenges

Challenge 1: Color-Change Button

Easy
Create a button that smoothly transitions from purple to pink on hover, with a 0.4 second duration and ease-in-out timing.
Sample Input
Hover over button
Sample Output
Button smoothly fades from purple to pink and back.
Use transition shorthand. Put the transition on the BASE state.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; margin: 0; font-family: Arial, sans-serif; }
  .btn { padding: 14px 32px; background: #a855f7; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.4s ease-in-out; }
  .btn:hover { background: #ec4899; }
</style>
</head>
<body>
  <button class="btn">Hover Me, Aarav</button>
</body>
</html>

Challenge 2: Lift Card on Hover

Easy
Create a card that lifts up 8px and casts a bigger shadow when hovered. Use a 0.3 second transition.
Sample Input
Hover over card
Sample Output
Card moves up and shadow grows smoothly.
Use transform: translateY and box-shadow. Transition both.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f8fafc; margin: 0; font-family: Arial, sans-serif; }
  .card { width: 260px; padding: 30px; background: white; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
  .card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
  .card h3 { color: #a855f7; margin: 0 0 8px 0; }
  .card p { color: #64748b; margin: 0; font-size: 14px; }
</style>
</head>
<body>
  <div class="card"><h3>Priya's Project</h3><p>A web app built with HTML, CSS, and a whole lot of curiosity.</p></div>
</body>
</html>

Challenge 3: Image Zoom Inside Frame

Medium
Create an image inside a frame. On hover, the image should zoom in (scale to 1.15) but stay inside the frame boundaries. Use overflow: hidden.
Sample Input
Hover over frame
Sample Output
Image scales up smoothly while staying clipped to the frame.
Use overflow: hidden on the frame. Transition transform on the image.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; margin: 0; }
  .frame { width: 300px; height: 220px; border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 12px 28px rgba(0,0,0,0.4); }
  .img { width: 100%; height: 100%; background: linear-gradient(135deg, #a855f7, #ec4899, #f59e0b); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 24px; font-family: Arial, sans-serif; }
  .frame:hover .img { transform: scale(1.15); }
</style>
</head>
<body>
  <div class="frame">
    <div class="img">Rohan's Artwork</div>
  </div>
</body>
</html>

Challenge 4: Sliding Underline Nav Link

Medium
Create a navigation link with a sliding underline effect. The underline should start with 0 width and slide in to 100% on hover. Use a ::after pseudo-element.
Sample Input
Hover over link
Sample Output
A colored underline slides in from left to right.
Use ::after. Transition the width property.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; margin: 0; font-family: Arial, sans-serif; }
  .link { color: white; text-decoration: none; font-size: 24px; position: relative; padding: 6px 0; }
  .link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: linear-gradient(90deg, #a855f7, #06b6d4); transition: width 0.4s ease; }
  .link:hover::after { width: 100%; }
</style>
</head>
<body>
  <a href="#" class="link">Ishita's Portfolio</a>
</body>
</html>

Challenge 5: Show/Hide Modal Correctly

Hard
Build a modal that opens and closes smoothly. It should NOT use display: none. Use opacity + visibility. Include a button to open and a close button inside the modal.
Sample Input
Click open, then close
Sample Output
Modal fades in and scales up smoothly, then fades out.
No display transitions. Use opacity + visibility. Add a scale transform for entry.
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 40px; background: #f8fafc; }
  .open-btn { padding: 12px 24px; background: #a855f7; color: white; border: none; border-radius: 8px; cursor: pointer; }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
  .overlay.open { opacity: 1; visibility: visible; }
  .modal { background: white; padding: 30px; border-radius: 14px; max-width: 400px; transform: scale(0.85); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .overlay.open .modal { transform: scale(1); }
  .modal h2 { color: #a855f7; margin-top: 0; }
  .close-btn { padding: 10px 20px; background: #e5e7eb; border: none; border-radius: 6px; cursor: pointer; }
</style>
</head>
<body>
  <button class="open-btn" id="openBtn">Open Modal</button>
  <div class="overlay" id="overlay">
    <div class="modal">
      <h2>Hi Vivaan</h2>
      <p>This modal fades and scales smoothly.</p>
      <button class="close-btn" id="closeBtn">Close</button>
    </div>
  </div>
  <script>
    const overlay = document.getElementById('overlay');
    document.getElementById('openBtn').addEventListener('click', () => overlay.classList.add('open'));
    document.getElementById('closeBtn').addEventListener('click', () => overlay.classList.remove('open'));
  </script>
</body>
</html>

Challenge 6: Interactive Social Icon Bar

Hard
Create a row of 4 social icons. On hover, each icon should lift up, rotate slightly, change to its brand color, and cast a glowing shadow. Use a cubic-bezier with overshoot for bounce.
Sample Input
Hover each icon
Sample Output
Icons lift and bounce with a colored shadow matching their brand.
Use cubic-bezier for the timing. Transition transform, background, color, and box-shadow.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; margin: 0; font-family: Arial, sans-serif; }
  .bar { display: flex; gap: 16px; }
  .icon { width: 60px; height: 60px; background: #1e293b; color: #cbd5e1; font-size: 22px; font-weight: bold; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 12px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .icon:hover { transform: translateY(-8px) rotate(-5deg); color: white; }
  .fb:hover { background: #1877f2; box-shadow: 0 14px 28px rgba(24, 119, 242, 0.4); }
  .ig:hover { background: linear-gradient(135deg, #833ab4, #fd1d1d); box-shadow: 0 14px 28px rgba(253, 29, 29, 0.4); }
  .yt:hover { background: #ff0000; box-shadow: 0 14px 28px rgba(255, 0, 0, 0.4); }
  .gh:hover { background: #24292e; box-shadow: 0 14px 28px rgba(36, 41, 46, 0.6); }
</style>
</head>
<body>
  <div class="bar">
    <a class="icon fb" href="#">F</a>
    <a class="icon ig" href="#">I</a>
    <a class="icon yt" href="#">Y</a>
    <a class="icon gh" href="#">G</a>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass