Chapter 19 Advanced 60 Questions

Practice Questions — CSS Animations with Keyframes

← Back to Notes
10 Easy
15 Medium
9 Hard

Topic-Specific Questions

Question 1
Easy
What is the difference between a CSS transition and a CSS animation?
Think about how many states each has.
A transition animates between TWO states (a starting and ending value). An animation uses @keyframes to define MANY states and can run automatically, loop, and play without a trigger.
Question 2
Easy
Which rule defines an animation in CSS?
Starts with @.
@keyframes
Question 3
Easy
What does this do?
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon { animation: spin 2s linear infinite; }
Classic spinner.
The icon rotates continuously, making a full 360-degree turn every 2 seconds, forever.
Question 4
Easy
How do you make an animation loop forever?
Iteration count.
animation-iteration-count: infinite; or in shorthand: animation: spin 1s infinite;
Question 5
Easy
What do from and to mean in @keyframes?
They are shorthand for percentages.
from is equivalent to 0% (start) and to is equivalent to 100% (end). They are shorthand for two-step animations.
Question 6
Medium
What does animation-direction: alternate do?
Plays forward then backward.
The animation plays forward (0% to 100%), then backward (100% to 0%), then forward again, alternating on every iteration.
Question 7
Medium
What does animation-fill-mode: forwards do?
After the animation ends.
After the animation finishes, the element keeps the styles from the final keyframe instead of reverting to its original CSS.
Question 8
Medium
What is the order of values in the animation shorthand?
Name first, then timing values.
animation: name duration timing-function delay iteration-count direction fill-mode;
Question 9
Medium
What does this animation do?
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.btn { animation: pulse 1s infinite; }
Grows then shrinks.
The button smoothly grows to 110% of its size at the midpoint and shrinks back to 100% at the end, looping forever.
Question 10
Medium
How do you apply multiple animations to a single element?
Comma-separated list.
animation: fadeIn 1s, bounce 2s infinite 1s;
Question 11
Medium
What does animation-play-state: paused do?
Like a pause button.
It freezes the animation at its current frame. Change to running to resume from the same point.
Question 12
Hard
Why is animating transform smoother than animating left?
GPU vs CPU.
transform is GPU-accelerated and does not trigger layout recalculation or repaint. left changes the element's position in the layout tree, causing the browser to recalculate positions every frame.
Question 13
Hard
What is the difference between animation-fill-mode: forwards and backwards?
Forwards = after. Backwards = during delay.
forwards keeps the FINAL keyframe state after the animation ends. backwards applies the FIRST keyframe state during the animation's delay period (before it starts).
Question 14
Hard
What does animation: spin 1s 2s infinite mean?
Identify which time is duration and which is delay.
The animation is named 'spin', runs for 1 second, starts 2 seconds after the element is rendered, and loops infinitely.
Question 15
Hard
How do you stagger animations on multiple child elements?
:nth-child with different delays.
Use :nth-child(N) selectors with different animation-delay values. Example: .card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; }

Mixed & Application Questions

Question 1
Easy
Which value makes an animation run forever?
One word.
infinite (used with animation-iteration-count)
Question 2
Easy
Can an @keyframes rule have more than two steps?
Think about percentages.
Yes. You can define any number of percentage-based steps: 0%, 10%, 25%, 50%, 100%, etc.
Question 3
Medium
When should you use @keyframes instead of a transition?
Complexity and autonomy.
Use @keyframes when you need multi-step animations, looping/infinite motion, or animations that run automatically without a trigger (like loading spinners, pulses, or entrance effects on page load).
Question 4
Medium
What happens if you apply animation: bounce 1s but never define @keyframes bounce?
No error, but no effect.
Nothing happens. The browser silently ignores the animation because the keyframes are not defined. There is no error message.
Question 5
Medium
What does steps(10, end) do as a timing function?
Discrete steps, not smooth.
The animation advances in 10 discrete jumps instead of smoothly interpolating. The 'end' means the change happens at the end of each step.
Question 6
Medium
What timing function is most natural for a loading spinner?
Constant speed.
linear
Question 7
Hard
What is the difference between alternate and reverse?
Alternate loops forward-backward; reverse always plays backward.
reverse plays the animation backward on every iteration (100% to 0%). alternate plays forward (0-100%) on odd iterations and backward (100-0%) on even iterations.
Question 8
Medium
Why is animation-fill-mode: forwards often essential?
End state.
Without forwards, the element snaps back to its original CSS after the animation ends, which often looks wrong for entrance animations (the element would disappear after sliding in).
Question 9
Hard
Can you animate CSS custom properties (variables)?
Yes, but they need special declaration.
Yes, but you must register the property with @property first so the browser knows its type. Otherwise the browser treats the variable as a string and cannot interpolate.
Question 10
Hard
What does animation-iteration-count: 2.5 mean?
Fractional iterations.
The animation plays two and a half times — two full cycles followed by halfway through a third.
Question 11
Medium
How do you stop animations for users who have motion sickness?
prefers-reduced-motion.
Use @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
Question 12
Easy
Which property controls how fast an animation plays?
Time.
animation-duration
Question 13
Medium
What does 0%, 100% { opacity: 1; } 50% { opacity: 0; } create?
Fade in/out at the middle.
A blinking effect — the element is visible at the start and end, and invisible in the middle. Paired with infinite, it creates continuous blinking.
Question 14
Hard
Why can you not animate background-image with a smooth transition between two images?
Discrete vs interpolable.
background-image values are discrete — the browser cannot interpolate between two different image URLs. It swaps instantly, not smoothly.
Question 15
Medium
What is @keyframes short for?
Animation key moments.
Keyframes — key moments (frames) in the animation where you define specific styles. The browser interpolates between them.
Question 16
Easy
What is animation-delay?
Wait before starting.
The time to wait before the animation starts playing after the element is rendered. Default is 0s.
Question 17
Easy
What does animation: spin 1s linear infinite do?
Classic spinner.
Runs the 'spin' animation for 1 second with constant speed, looping forever.
Question 18
Medium
Where should you declare @keyframes rules in your stylesheet?
Order does not matter much.
Anywhere in the stylesheet, as long as they exist BEFORE the browser tries to apply them. By convention, many developers put them near the bottom or in a dedicated section.
Question 19
Hard
What happens if two keyframes at the same percentage conflict?
@keyframes test {
  50% { background: red; }
  50% { background: blue; }
  100% { background: green; }
}
Last one wins.
The last definition wins. At 50%, background is blue (the later rule overrides the earlier one).

Multiple Choice Questions

MCQ 1
Which CSS rule defines an animation?
  • A. @animation
  • B. @keyframes
  • C. @motion
  • D. @animate
Answer: B
B is correct. @keyframes name { ... } defines the steps of an animation.
MCQ 2
How do you make an animation run forever?
  • A. animation-iteration-count: forever
  • B. animation-iteration-count: infinite
  • C. animation-loop: true
  • D. animation-repeat: always
Answer: B
B is correct. infinite is the keyword for endless iteration.
MCQ 3
In @keyframes, what does from mean?
  • A. 50%
  • B. 0% (the start)
  • C. 100% (the end)
  • D. The starting delay
Answer: B
B is correct. from is shorthand for 0% and to is shorthand for 100%.
MCQ 4
What is the correct shorthand order?
  • A. animation: duration name timing-function
  • B. animation: name duration timing-function delay iteration-count direction fill-mode
  • C. animation: name timing-function duration
  • D. animation: fill-mode name duration
Answer: B
B is correct. The order is: name, duration, timing-function, delay, iteration-count, direction, fill-mode. Only name and duration are required.
MCQ 5
Which timing function is best for a loading spinner?
  • A. ease
  • B. linear
  • C. ease-in-out
  • D. cubic-bezier(1, 0, 0, 1)
Answer: B
B is correct. Spinners should rotate at a constant speed, which is what linear provides.
MCQ 6
What does animation-direction: alternate do?
  • A. Plays every other animation
  • B. Plays forward, then backward, alternating on each iteration
  • C. Skips alternate frames
  • D. Randomizes the direction
Answer: B
B is correct. Alternate plays 0-100% on odd iterations and 100-0% on even iterations, creating smooth back-and-forth motion.
MCQ 7
What does animation-fill-mode: forwards do?
  • A. Plays the animation in fast-forward
  • B. Keeps the element in its final keyframe state after the animation ends
  • C. Moves the element forward
  • D. Starts the animation later
Answer: B
B is correct. Without forwards, the element snaps back to its original styles after the animation. With forwards, it stays in the final state.
MCQ 8
Which animation property can JavaScript change to pause an animation?
  • A. animation-stop
  • B. animation-play-state
  • C. animation-duration
  • D. animation-pause
Answer: B
B is correct. animation-play-state: paused freezes the animation. Setting it back to running resumes it.
MCQ 9
How do you apply TWO animations to an element?
  • A. animation: fadeIn 1s; animation: bounce 2s;
  • B. animation: fadeIn 1s, bounce 2s;
  • C. animation: fadeIn 1s and bounce 2s;
  • D. Use two different elements
Answer: B
B is correct. Separate multiple animations with commas. Each runs independently.
MCQ 10
Which property can you animate most efficiently?
  • A. width
  • B. height
  • C. transform
  • D. top
Answer: C
C is correct. transform (and opacity) run on the GPU without triggering layout, making them the most performant.
MCQ 11
What does this define?
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  • A. A fade-out effect
  • B. A fade-in effect (invisible to visible)
  • C. A loop animation
  • D. Nothing
Answer: B
B is correct. The opacity goes from 0 (invisible) to 1 (fully visible), creating a fade-in effect.
MCQ 12
Why is animation: spin 1s forwards NOT useful?
  • A. forwards does nothing for non-repeating animations
  • B. spin animations usually loop; forwards has no visible effect on an infinite animation
  • C. You cannot combine forwards with spin
  • D. The syntax is wrong
Answer: B
B is correct. forwards preserves the final keyframe state after the animation ends. For a looping animation, there is no 'end', so forwards has no effect.
MCQ 13
What creates a typewriter effect?
  • A. animation-timing-function: linear and width from 0 to full
  • B. animation-timing-function: steps(N, end) with a width animation
  • C. animation-iteration-count: infinite
  • D. animation-direction: reverse
Answer: B
B is correct. steps(N, end) advances in discrete jumps, making characters appear one at a time instead of smoothly growing.
MCQ 14
What happens if you apply an animation whose @keyframes name has a typo?
  • A. The browser throws an error
  • B. The browser silently ignores the animation
  • C. The animation plays instantly
  • D. The element disappears
Answer: B
B is correct. Typos in animation names silently fail. Always double-check the @keyframes name matches the animation-name value exactly.
MCQ 15
Which creates a stagger effect where multiple elements animate one after another?
  • A. Different animation-duration on each
  • B. Different animation-delay on each
  • C. Using different @keyframes for each
  • D. Multiple animation-iteration-counts
Answer: B
B is correct. Apply the same animation to multiple elements with different animation-delay values (often using :nth-child) to create a cascade or wave.
MCQ 16
What does prefers-reduced-motion: reduce detect?
  • A. Slow internet connections
  • B. User OS preference for minimized motion (accessibility)
  • C. Low battery mode
  • D. High contrast mode
Answer: B
B is correct. It detects if the user has asked their OS to reduce motion for accessibility. Use it to disable or simplify animations.
MCQ 17
Can @keyframes contain more than two steps?
  • A. No, only from and to
  • B. Yes, you can use any number of percentage-based steps
  • C. Maximum 5 steps
  • D. Maximum 100 steps
Answer: B
B is correct. You can define as many percentage steps as you want: 0%, 10%, 25%, 50%, 75%, 100%, or any custom percentages.
MCQ 18
What is the minimum valid shorthand for applying an animation?
  • A. animation: name;
  • B. animation: name duration;
  • C. animation: name duration timing-function;
  • D. animation: name duration delay;
Answer: B
B is correct. At minimum you need the name and duration. Everything else has defaults.
MCQ 19
Which property's value CANNOT be smoothly animated between different values?
  • A. opacity
  • B. transform
  • C. display
  • D. background-color
Answer: C
C is correct. display is discrete with no intermediate values. It cannot be smoothly animated in classic CSS animations.
MCQ 20
Why might animation-delay: 2s be useful?
  • A. To make the animation faster
  • B. To wait 2 seconds before the animation starts (useful for staggering or timing entrance animations)
  • C. To reduce CPU load
  • D. To prevent the animation from running at all
Answer: B
B is correct. Delay postpones the start of the animation, which is how you stagger multiple animations into a sequence.

Coding Challenges

Challenge 1: Rotating Loading Spinner

Easy
Create a circular loading spinner that rotates continuously. Use a border with one side colored to show the spin direction. Duration 1 second, linear, infinite.
Sample Input
Open the page
Sample Output
A spinning circle.
Use @keyframes and transform: rotate. Must loop infinitely.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f172a; margin: 0; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .spinner { width: 60px; height: 60px; border: 6px solid #1e293b; border-top-color: #a855f7; border-radius: 50%; animation: spin 1s linear infinite; }
</style>
</head>
<body>
  <div class="spinner"></div>
</body>
</html>

Challenge 2: Pulsing Button

Easy
Create a button that gently pulses (scales from 1 to 1.08 and back) continuously to draw attention. Use alternate to avoid defining both forward and backward steps.
Sample Input
None
Sample Output
A button that grows and shrinks slowly in a loop.
Use @keyframes with only half the animation. Use animation-direction: alternate.
<!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; }
  @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
  .btn { padding: 16px 36px; font-size: 18px; background: #a855f7; color: white; border: none; border-radius: 10px; cursor: pointer; animation: pulse 1s ease-in-out infinite alternate; }
</style>
</head>
<body>
  <button class="btn">Click Me, Aarav!</button>
</body>
</html>

Challenge 3: Fade-In on Page Load

Medium
Make a heading and paragraph fade in and slide up when the page loads. The heading should animate first, followed by the paragraph 0.3 seconds later. Both should stay visible after the animation ends.
Sample Input
Load the page
Sample Output
Heading fades in from below, then paragraph fades in.
Use @keyframes with opacity and translateY. Use animation-delay. Use fill-mode: forwards.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; background: #0f172a; color: white; font-family: Arial, sans-serif; margin: 0; }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  h1, p { opacity: 0; animation: slideUp 0.8s ease-out forwards; text-align: center; }
  h1 { color: #a855f7; font-size: 42px; }
  p { color: #cbd5e1; max-width: 400px; animation-delay: 0.3s; }
</style>
</head>
<body>
  <h1>Welcome Ishita</h1>
  <p>This heading and paragraph fade in from below when the page loads.</p>
</body>
</html>

Challenge 4: Bouncing Ball

Medium
Create a ball that bounces up and down continuously. The ball should rise 200px, pause briefly at the top, and fall back. Use cubic-bezier for a natural gravity-like feel.
Sample Input
None
Sample Output
A ball bouncing forever.
Use @keyframes with 0%, 50%, 100% steps. Use transform: translateY. Use cubic-bezier.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: flex-end; height: 100vh; background: linear-gradient(to bottom, #0f172a, #1e293b); margin: 0; padding-bottom: 80px; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-200px); }
  }
  .ball { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fef3c7, #f59e0b, #b45309); box-shadow: 0 6px 14px rgba(245, 158, 11, 0.5); animation: bounce 1.3s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
</style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

Challenge 5: Typing Text Effect

Hard
Create a typewriter effect where text appears character by character. Include a blinking cursor. Use steps() timing and ch units for width.
Sample Input
None
Sample Output
Text types out with a blinking cursor.
Use two @keyframes: one for typing (width), one for blink (border). Use steps() timing.
<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; margin: 0; font-family: 'Courier New', monospace; color: #10b981; font-size: 24px; }
  .typing { overflow: hidden; white-space: nowrap; border-right: 3px solid #a855f7; width: 0; animation: typing 2.5s steps(22, end) forwards, blink 0.7s step-end infinite; }
  @keyframes typing { from { width: 0; } to { width: 22ch; } }
  @keyframes blink {
    from, to { border-color: transparent; }
    50%      { border-color: #a855f7; }
  }
</style>
</head>
<body>
  <div class="typing">Hi, I am Priya the dev</div>
</body>
</html>

Challenge 6: Staggered Card Grid Entrance

Hard
Create a grid of 5 cards that slide up and fade in one after another when the page loads. Each card should start 0.15s after the previous. Use @keyframes, animation-delay, and :nth-child.
Sample Input
Load the page
Sample Output
Cards appear in a wave, each one after the previous.
Single @keyframes for all cards. Use :nth-child with different animation-delay values. Use fill-mode: forwards.
<!DOCTYPE html>
<html>
<head>
<style>
  body { background: #0f172a; font-family: Arial, sans-serif; padding: 40px 20px; margin: 0; }
  h1 { color: #a855f7; text-align: center; margin-bottom: 24px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
  .card { padding: 26px; border-radius: 14px; color: white; font-weight: bold; opacity: 0; transform: translateY(40px); animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .card:nth-child(1) { background: linear-gradient(135deg, #a855f7, #ec4899); animation-delay: 0.1s; }
  .card:nth-child(2) { background: linear-gradient(135deg, #06b6d4, #0ea5e9); animation-delay: 0.25s; }
  .card:nth-child(3) { background: linear-gradient(135deg, #f59e0b, #ef4444); animation-delay: 0.4s; }
  .card:nth-child(4) { background: linear-gradient(135deg, #10b981, #06b6d4); animation-delay: 0.55s; }
  .card:nth-child(5) { background: linear-gradient(135deg, #8b5cf6, #3b82f6); animation-delay: 0.7s; }
  @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body>
  <h1>Our Team</h1>
  <div class="grid">
    <div class="card">Aarav</div>
    <div class="card">Priya</div>
    <div class="card">Rohan</div>
    <div class="card">Ishita</div>
    <div class="card">Vivaan</div>
  </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