1.12 — Exercise Questions: CSS Animations & Motion Design

Practice questions for all five subtopics in Section 1.12. Mix of short-answer, CSS writing, and DevTools drills. Try each without reopening the lesson files first.

How to use this material (instructions)

1. Read lessons in order — README.md, then 1.12.a → 1.12.e in sequence.
2. Answer closed-book first — write CSS or bullet-point answers, then compare to the matching lesson.
3. Hands-on DevTools — use Performance, Rendering (paint flashing), and Layers panels where indicated.
4. Redo misses — retry the next day; mark weak subtopics (1.12.c 3D, 1.12.e performance, etc.).
5. Interview prep — pair with 1.12-Interview-Questions.md.

---

1.12.a — CSS Transitions (Q1–Q10)

Q1. Write the transition shorthand that animates background-color over 250 ms with an ease-out curve and no delay.

Hint: transition: <property> <duration> <timing-function> <delay>;

Q2. Name three CSS properties that cannot be transitioned, and explain why.

Q3. What is the default timing function if you write transition: opacity 300ms?

Hint: look at the default for transition-timing-function.

Q4. Explain the difference between ease-in and ease-out in plain English.

Q5. A button has transition: all 500ms. The user toggles a dark-mode class that changes color, background, border, box-shadow, and font-size. Describe what happens and why it might be a problem.

Q6. Write CSS for a card that, on hover, moves up 4 px and gains a subtle shadow — using only animatable, compositor-friendly properties.

Q7. Why is 0.01ms preferred over 0s in a prefers-reduced-motion reset?

Q8. What event fires when a transition completes? Write the JS listener.

Q9. You transition three properties with different durations. How many transitionend events fire?

Hint: one per property.

Q10. Write a complete prefers-reduced-motion media query that disables all transitions and animations globally.

---

1.12.b — CSS Transform (Q11–Q20)

Q11. Write a transform that moves an element 50 px right and 20 px down.

Q12. What does transform: scale(-1, 1) do visually?

Q13. Explain why transform: translateX(100px) does not push sibling elements out of the way.

Q14. An element has transform: rotate(45deg) translateX(100px). Describe where it ends up compared to transform: translateX(100px) rotate(45deg).

Q15. What is the default transform-origin? How would you change it so a rotation pivots from the top-left corner?

Q16. Write CSS to create a "mirror" effect that flips an image horizontally.

Q17. Why is animating transform: scale(1.5) cheaper than animating width: 150%? Name the rendering stages each triggers.

Q18. An absolutely positioned element uses top: 50%; left: 50%; transform: translate(-50%, -50%). Why does this center it?

Hint: % in translate refers to the element's own dimensions.

Q19. Write a hover effect that rotates a gear icon 360° smoothly.

Q20. Create an image-zoom effect where hovering over a container scales the image to 110% without the image overflowing the container.

---

1.12.c — 3D Transforms (Q21–Q30)

Q21. What does perspective: 600px do when set on a parent container?

Q22. Compare perspective as a property on a parent vs perspective() as a function in transform. When do they produce different results?

Q23. Write a transform that rotates an element 45° around the Y axis with a 500 px perspective.

Q24. What happens if you use rotateY(90deg) without setting perspective?

Hint: think about what a flat projection of 90° rotation looks like.

Q25. Explain transform-style: preserve-3d in one sentence.

Q26. When is backface-visibility: hidden necessary? Give an example.

Q27. Write the complete CSS for a card-flip effect (front and back faces) that flips on hover. Include the HTML structure as a comment.

Q28. Why does the .card__back in a flip animation start with transform: rotateY(180deg)?

Q29. A developer puts preserve-3d on 200 list items. What performance problem might this cause?

Q30. What is perspective-origin and what effect does changing it from center to top left have?

---

1.12.d — Keyframe Animations (Q31–Q42)

Q31. Write a @keyframes rule called slideDown that moves an element from translateY(-100%) to translateY(0).

Q32. What is the difference between from/to and percentage stops in @keyframes?

Q33. Write the animation shorthand that runs slideDown over 400 ms with ease-out, no delay, once, forwards fill mode.

Q34. An element fades in with animation: fadeIn 500ms ease-out forwards, but during page load it's visible for a split second before the animation starts. How do you fix this?

Hint: set opacity: 0 on the element and use fill-mode: both with a small delay, or set initial opacity to 0.

Q35. Explain animation-fill-mode: both — what does it do during the delay period and after the animation ends?

Q36. Write CSS for an infinite loading spinner (a circle with a colored top border that rotates).

Q37. How would you stagger the entrance of five list items so each appears 100 ms after the previous one?

Q38. What does a negative animation-delay do? Give a practical use case.

Q39. Write a "pulse" animation that scales an element to 105% and back, running infinitely.

Q40. What is animation-direction: alternate and why is it useful for looping animations?

Q41. Name three CSS animation events you can listen for in JavaScript.

Q42. Write a @keyframes rule with at least four percentage stops that creates a "shake" effect (horizontal wiggle).

---

1.12.e — Animation Performance (Q43–Q50)

Q43. Name the two CSS properties that can be animated on the compositor thread without triggering layout or paint.

Q44. A developer animates margin-left from 0 to 100px. Trace the rendering stages that fire on each frame. Then rewrite it using transform.

Q45. What is the frame budget for 60 fps? Show the calculation.

Q46. Explain what will-change: transform does and give one situation where it helps and one where it hurts.

Q47. How would you use DevTools to detect that a hover animation is causing expensive repaints?

Hint: Rendering panel → Paint flashing.

Q48. Write CSS to animate a box-shadow on hover without triggering paint every frame.

Hint: use a pseudo-element with a pre-rendered shadow, then animate its opacity.

Q49. Write a complete prefers-reduced-motion fallback that also resets scroll-behavior.

Q50. A landing page has 12 cards with will-change: transform applied permanently. Each card is 300×200 on a 2× display. Estimate the total GPU memory used by these layers alone.

Hint: width × height × devicePixelRatio² × 4 bytes per layer.

---

Answer Hints

These are hints, not full solutions — use them after attempting each question.

Q	Hint
Q1	transition: background-color 250ms ease-out;
Q3	ease
Q6	transform: translateY(-4px) + box-shadow transition
Q9	Three transitionend events
Q11	transform: translate(50px, 20px)
Q12	Mirrors horizontally (flips on X axis)
Q15	Default is center / 50% 50%; use transform-origin: top left
Q18	top/left: 50% moves the top-left corner to center; translate(-50%, -50%) shifts back by half the element's own size
Q23	transform: perspective(500px) rotateY(45deg)
Q24	The element appears as a vertical line (zero width in projection)
Q31	from { transform: translateY(-100%); } to { transform: translateY(0); }
Q36	border-radius: 50%; border: 4px solid #eee; border-top-color: blue; animation: spin 0.8s linear infinite;
Q37	animation-delay: 0ms, 100ms, 200ms, 300ms, 400ms using nth-child
Q43	transform and opacity
Q45	1000ms ÷ 60 = 16.67 ms
Q48	::after with the shadow, then transition: opacity 200ms on the pseudo
Q50	12 × (300 × 2) × (200 × 2) × 4 bytes = 12 × 600 × 400 × 4 = ~11.5 MB