CSS Animations & Transitions Practice Exam

Question 1 CSS Animations & Transitions

What is the role of transform: translateZ(0)?

A hint to the browser that those properties will change, allowing it to pre-allocate compositor layers for smoother animation. It hints the GPU to promote the element to its own layer, sometimes used as a legacy performance trick (modern code prefers will-change). Use animation-iteration-count: infinite and make the 100% keyframe match the 0% keyframe, so the loop has no visible jump. .button { background: #ccc; transition: background 200ms; } .button:hover { background: #888; } — a smooth color change.

Question 2 CSS Animations & Transitions

What does compositing mean in browser rendering?

Yes. Each keyframe selector can set any number of properties (transform, opacity, color, etc.) and all are interpolated. transition-delay defers a single change event; animation-delay defers the start of the first iteration of a keyframe animation. It defines an acceleration curve, with x = time progress and y = value progress. The shape determines how the animation feels. The final step where painted layers are combined into the screen image. Animations on transform/opacity can be done in this stage alone.

Question 3 CSS Animations & Transitions

What does perspective do in CSS?

To define the named stages of an animation, listing the styles the element should have at each percentage of the timeline. translate, rotate, scale (plus skew and matrix). Sets the distance from the viewer to the z=0 plane, controlling the apparent depth of 3D transforms. To animate smoothly between two states of a property when it changes, interpolating intermediate values over time.

Question 4 CSS Animations & Transitions

What is a common use of transition on hover?

A small rotating element used to indicate loading, usually made with animation: spin 1s linear infinite and border-radius: 50%. A negative delay starts the animation as if it had already been running, useful for beginning an animation mid-cycle. A longhand defining the acceleration curve of the transition: ease, linear, ease-in, ease-out, ease-in-out, steps(), cubic-bezier(). .button { transition: background-color 200ms ease; } .button:hover { background-color: blue; } — smoothly changes color on hover.

Question 5 CSS Animations & Transitions

Which CSS property makes an element animatable through keyframes?

Sets the distance from the viewer to the z=0 plane, controlling the apparent depth of 3D transforms. animation, used together with @keyframes to define the sequence. Defines what styles the element retains outside the animation runtime: none, forwards, backwards, or both. steps() produces discrete, staircase-like progress; normal easing functions produce continuous, smooth interpolation.

Question 6 CSS Animations & Transitions

What is stroke-dasharray?

transform and opacity are usually promoted to the GPU and don't trigger layout or paint, only composite, so they animate more smoothly. It detects the user's OS-level setting to reduce motion; designers use it to disable or simplify animations for accessibility. An SVG property that defines the dash pattern of a stroke; setting it equal to the path length controls how much of the path is visible. Set element.style.animationPlayState = 'paused'; or remove/reapply the animation property.

Question 7 CSS Animations & Transitions

What does the order of transform functions matter?

It permits CSS to interpolate between keyword sizes like auto, allowing transitions on height: auto. Use transition: opacity 300ms ease; and toggle a class that sets opacity: 0; the element gradually becomes transparent. Applying slightly different animation-delay values to a group of elements so they animate sequentially rather than all at once. Yes. transform: rotate(45deg) translateX(100px) is not the same as translateX(100px) rotate(45deg); transforms apply right-to-left.

Question 8 CSS Animations & Transitions

What is the typical syntax of @property?

@property --my-var { syntax: ''; inherits: false; initial-value: #000; } A longhand that sets how long the transition runs, in seconds (0.3s) or milliseconds. Default is 0s, meaning no transition. scaleX uses the GPU and doesn't trigger layout; width triggers reflow every frame and is much slower for animation. Pair opacity/transform with visibility: hidden/visible (or display: none after a delay) so assistive tech treats it correctly.

Question 9 CSS Animations & Transitions

What does transform: translate(50px, 0) do?

Moves the element 50 pixels to the right, without affecting its position in the document flow. Specifies which @keyframes rule to use. Without it, no animation runs. opacity: 0 makes the element fully transparent but still clickable and in the layout; visibility: hidden makes it invisible and unclickable but keeps its layout space. Animating properties that affect layout (width, height, top, left, margin) forces the browser to recalculate layout every frame, hurting performance.

Question 10 CSS Animations & Transitions

How do you keep a transition target reachable for screen readers?

Pair opacity/transform with visibility: hidden/visible (or display: none after a delay) so assistive tech treats it correctly. animation, used together with @keyframes to define the sequence. It hints to the browser that an element will be animated, often promoting it to its own compositor layer to improve performance. A list where each item fades/slides in with a slightly later animation-delay, creating a cascade effect.

Question 11 CSS Animations & Transitions

What does animation-direction control?

Starts slow and accelerates toward the end (cubic-bezier(0.42, 0, 1, 1)). The direction of playback: normal, reverse, alternate (forward then backward), or alternate-reverse. Default is normal. Enlarges the element to 1.5 times its size, with respect to transform-origin. Set a different animation-delay on each element so they start at offset times, creating a cascading effect.

Question 12 CSS Animations & Transitions

What is the default timing function for transitions?

Applying slightly different animation-delay values to a group of elements so they animate sequentially rather than all at once. A marker like 0%, 50%, or 100% inside @keyframes that defines the styles at that point of the animation timeline. Register the property with @property, give it a syntax and initial-value, then it can be transitioned/animated with @keyframes. ease (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)).

Question 13 CSS Animations & Transitions

What does the ease-out timing function do?

Starts fast and decelerates toward the end (cubic-bezier(0, 0, 0.58, 1)), good for elements coming to rest. Rotates the element 45 degrees clockwise. Specifies which @keyframes rule to use. Without it, no animation runs. An SVG property that defines the dash pattern of a stroke; setting it equal to the path length controls how much of the path is visible.

Question 14 CSS Animations & Transitions

Why might transition: all cause performance issues?

Because it animates EVERY changing property, including unintended ones like transform or filter, which can be expensive. Sets the total length of one animation cycle (e.g. 2s). Default is 0s, meaning the animation is disabled. Iteration count controls how many times the cycle repeats; duration controls the length of one cycle. They are independent. transform is a property that changes an element's geometry; transition is a feature that animates ANY animatable property when its value changes.

Question 15 CSS Animations & Transitions

How do you fade an element out smoothly?

Use transition: opacity 300ms ease; and toggle a class that sets opacity: 0; the element gradually becomes transparent. It gives an element a unique name so the browser can match it between two states and animate its position, size, and appearance. The transition is effectively disabled — the change is instant, behaving as if no transition were defined. Applying slightly different animation-delay values to a group of elements so they animate sequentially rather than all at once.

Question 16 CSS Animations & Transitions

What is the difference between a "to" and "100%" keyframe?

@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } and apply it with a duration and easing. Whether the back side of a 3D-transformed element is visible. Default is visible; setting it to hidden hides the back, useful for card-flip effects. They are equivalent — "to" is just an alias for 100%, and "from" is an alias for 0%. Wrap heavy animations in @media (prefers-reduced-motion: no-preference) { ... } or use prefers-reduced-motion: reduce to override durations.

Question 17 CSS Animations & Transitions

What does animation-timing-function apply to?

Stopping the element from being rendered cancels any active animations or transitions; the animationend/transitionend events are NOT fired when this happens. Animates the scroll of an anchor link or programmatic scrollTo call over a short period, rather than snapping. Each layer consumes memory and GPU resources; using it on many elements can hurt overall performance. It sets the easing between each pair of adjacent keyframes, not across the whole animation, so different keyframe pairs can use different easings.

Question 18 CSS Animations & Transitions

What is easing?

A negative delay starts the animation as if it had already been running, useful for beginning an animation mid-cycle. The function that maps time progress to animation progress, controlling the perceived acceleration and deceleration of motion. A technique: First, Last, Invert, Play — used to animate layout changes smoothly. JS measures positions, then CSS transitions handle the visual move. A circular highlight that expands and fades from a click point, typically achieved with an absolutely positioned element, scale animation, and opacity transition.

Question 19 CSS Animations & Transitions

How can you animate a custom property (CSS variable)?

Set element.style.animationPlayState = 'paused'; or remove/reapply the animation property. Register the property with @property, give it a syntax and initial-value, then it can be transitioned/animated with @keyframes. Rotates the element 45 degrees clockwise. Yes. Each keyframe selector can set any number of properties (transform, opacity, color, etc.) and all are interpolated.

Question 20 CSS Animations & Transitions

Name three animatable transform functions used in transitions/animations.

Pair opacity/transform with visibility: hidden/visible (or display: none after a delay) so assistive tech treats it correctly. translate, rotate, scale (plus skew and matrix). Set a different animation-delay on each element so they start at offset times, creating a cascading effect. Yes. transform: rotate(45deg) translateX(100px) is not the same as translateX(100px) rotate(45deg); transforms apply right-to-left.

Question 21 CSS Animations & Transitions

What is the difference between animation and transition?

A JavaScript event fired on an element when a CSS transition completes, useful for chaining animations or cleanup. .button { background: #ccc; transition: background 200ms; } .button:hover { background: #888; } — a smooth color change. A transition needs a state change trigger and runs once between two values; an animation runs automatically, can loop, and uses multi-step keyframes. Enlarges the element to 1.5 times its size, with respect to transform-origin.

Question 22 CSS Animations & Transitions

How does the view-transition-name property work?

Set element.style.animationPlayState = 'paused'; or remove/reapply the animation property. Sets the point around which transforms are applied. Default is 50% 50% (the element's center). It gives an element a unique name so the browser can match it between two states and animate its position, size, and appearance. Enlarges the element to 1.5 times its size, with respect to transform-origin.

Question 23 CSS Animations & Transitions

What does the animation-fill-mode: forwards value do?

Sets the distance from the viewer to the z=0 plane, controlling the apparent depth of 3D transforms. Keeps the last keyframe's styles applied to the element after the animation ends, instead of reverting to the original. steps() produces discrete, staircase-like progress; normal easing functions produce continuous, smooth interpolation. Set a different animation-delay on each element so they start at offset times, creating a cascading effect.

Question 24 CSS Animations & Transitions

What is the "transitionend" event?

A marker like 0%, 50%, or 100% inside @keyframes that defines the styles at that point of the animation timeline. A JavaScript event fired on an element when one iteration of a CSS animation finishes. A JavaScript event fired on an element when a CSS transition completes, useful for chaining animations or cleanup. opacity transitions are smooth and continuous; visibility transitions are discrete, snapping at 50% of the duration.

Question 25 CSS Animations & Transitions

What does a "stagger" mean in CSS animation?

Divides the animation into a fixed number of discrete jumps instead of a smooth interpolation. steps(4, end) produces 4 visible frames. Applying slightly different animation-delay values to a group of elements so they animate sequentially rather than all at once. Register the property with @property, give it a syntax and initial-value, then it can be transitioned/animated with @keyframes. Defines what styles the element retains outside the animation runtime: none, forwards, backwards, or both.

Question 26 CSS Animations & Transitions

What is the difference between perspective on the parent and on the element?

SMIL (, ) is an SVG-native animation system; CSS transitions/animations are preferred because SMIL is deprecated in some browsers. perspective on the parent affects all child 3D transforms collectively; perspective() as a transform function affects only that element. @property --my-var { syntax: ''; inherits: false; initial-value: #000; } A technique: First, Last, Invert, Play — used to animate layout changes smoothly. JS measures positions, then CSS transitions handle the visual move.

Question 27 CSS Animations & Transitions

What happens at 0% and 100% if you omit one in @keyframes?

A transform using functions like translate3d, rotateX, rotateY, rotateZ, or perspective that gives the element depth. The browser uses the element's current style for the missing endpoint. "from" is shorthand for 0%, "to" for 100%. Whether the back side of a 3D-transformed element is visible. Default is visible; setting it to hidden hides the back, useful for card-flip effects. The function that maps time progress to animation progress, controlling the perceived acceleration and deceleration of motion.

Question 28 CSS Animations & Transitions

What is the @keyframes rule used for?

Pair opacity/transform with visibility: hidden/visible (or display: none after a delay) so assistive tech treats it correctly. A transition needs a state change trigger and runs once between two values; an animation runs automatically, can loop, and uses multi-step keyframes. To define the named stages of an animation, listing the styles the element should have at each percentage of the timeline. A technique: First, Last, Invert, Play — used to animate layout changes smoothly. JS measures positions, then CSS transitions handle the visual move.

Question 29 CSS Animations & Transitions

What does the @property rule do?

"all" animates every changing property, which can cause unintended animations; naming a specific property is safer and more performant. animation, used together with @keyframes to define the sequence. A longhand that sets how long the transition runs, in seconds (0.3s) or milliseconds. Default is 0s, meaning no transition. It declares a custom property with an explicit type, initial value, and inheritance, enabling the property to be animated.

Question 30 CSS Animations & Transitions

What is a common accessibility issue with CSS animations?

60 frames per second, meaning each frame should complete in ~16.7ms. Continuous motion can trigger discomfort or vestibular issues; mitigate with prefers-reduced-motion. A JavaScript event fired on an element when one iteration of a CSS animation finishes. The final step where painted layers are combined into the screen image. Animations on transform/opacity can be done in this stage alone.

Question 31 CSS Animations & Transitions

What is will-change: transform, opacity?

A marker like 0%, 50%, or 100% inside @keyframes that defines the styles at that point of the animation timeline. Constant speed from start to end (cubic-bezier(0, 0, 1, 1)). A hint to the browser that those properties will change, allowing it to pre-allocate compositor layers for smoother animation. @keyframes name { 0% { ... } 50% { ... } 100% { ... } } — percentages (or "from" and "to") mark keyframe positions.

Question 32 CSS Animations & Transitions

What kinds of property changes can be transitioned?

It declares a custom property with an explicit type, initial value, and inheritance, enabling the property to be animated. @property --my-var { syntax: ''; inherits: false; initial-value: #000; } Only animatable properties with a defined interpolation between values. Discrete properties like display cannot be smoothly transitioned. A longhand that sets how long to wait after the change before the transition begins. Default is 0s.

Question 33 CSS Animations & Transitions

Can a single @keyframes block target multiple properties?

To animate smoothly between two states of a property when it changes, interpolating intermediate values over time. The final step where painted layers are combined into the screen image. Animations on transform/opacity can be done in this stage alone. Yes. Each keyframe selector can set any number of properties (transform, opacity, color, etc.) and all are interpolated. A transition needs a state change trigger and runs once between two values; an animation runs automatically, can loop, and uses multi-step keyframes.

Question 34 CSS Animations & Transitions

What is a common way to animate SVG paths?

A longhand that sets how long to wait after the change before the transition begins. Default is 0s. Use stroke-dasharray and stroke-dashoffset with CSS transition/animation to "draw" the path from start to end. scaleX uses the GPU and doesn't trigger layout; width triggers reflow every frame and is much slower for animation. transition: opacity 200ms ease-in-out; — property, duration, timing-function, optional delay (delay must be the second time value).

Question 35 CSS Animations & Transitions

What is FLIP in CSS animation?

To animate an element through multiple keyframes over time, including loops and complex multi-step sequences, without needing state changes. A property that replaces animation-duration, animation-delay, and animation-iteration-count when the animation is driven by a scroll or view timeline. Set a different animation-delay on each element so they start at offset times, creating a cascading effect. A technique: First, Last, Invert, Play — used to animate layout changes smoothly. JS measures positions, then CSS transitions handle the visual move.

Question 36 CSS Animations & Transitions

What is the difference between animation-iteration-count: infinite and infinite duration?

animation: name duration timing-function delay iteration-count direction fill-mode play-state; — only the first two are required. Use stroke-dasharray and stroke-dashoffset with CSS transition/animation to "draw" the path from start to end. Iteration count controls how many times the cycle repeats; duration controls the length of one cycle. They are independent. Applies the first keyframe's styles to the element during the animation-delay period, before the animation actually starts.

Question 37 CSS Animations & Transitions

What is the difference between opacity: 0 and visibility: hidden?

Starts fast and decelerates toward the end (cubic-bezier(0, 0, 0.58, 1)), good for elements coming to rest. Remove the animation property (or set animation: none), force a reflow (e.g. element.offsetWidth), then re-add the original animation. A longhand that sets how long the transition runs, in seconds (0.3s) or milliseconds. Default is 0s, meaning no transition. opacity: 0 makes the element fully transparent but still clickable and in the layout; visibility: hidden makes it invisible and unclickable but keeps its layout space.

Question 38 CSS Animations & Transitions

Why is it preferable to animate transform and opacity over top/left?

A technique: First, Last, Invert, Play — used to animate layout changes smoothly. JS measures positions, then CSS transitions handle the visual move. transform and opacity are usually promoted to the GPU and don't trigger layout or paint, only composite, so they animate more smoothly. translate, rotate, scale (plus skew and matrix). When the value of a watched property changes, typically triggered by a pseudo-class (:hover, :focus), a class change, or a JavaScript style update.

Question 39 CSS Animations & Transitions

What is the most common mistake when writing the transition shorthand?

Starts slow and accelerates toward the end (cubic-bezier(0.42, 0, 1, 1)). It permits CSS to interpolate between keyword sizes like auto, allowing transitions on height: auto. Forgetting that the first time value is duration and the second is delay. transition: opacity 1s 200ms; means 1s duration, 200ms delay. Specifies which @keyframes rule to use. Without it, no animation runs.

Question 40 CSS Animations & Transitions

When does a transition actually start?

@keyframes name { 0% { ... } 50% { ... } 100% { ... } } — percentages (or "from" and "to") mark keyframe positions. Use animation-iteration-count: infinite and make the 100% keyframe match the 0% keyframe, so the loop has no visible jump. It declares a custom property with an explicit type, initial value, and inheritance, enabling the property to be animated. When the value of a watched property changes, typically triggered by a pseudo-class (:hover, :focus), a class change, or a JavaScript style update.

Question 41 CSS Animations & Transitions

What is the difference between visibility and opacity transitions?

The animation jumps at the END of each step; the element shows the start value until each step completes, then snaps to the next value. transition-delay defers a single change event; animation-delay defers the start of the first iteration of a keyframe animation. A list where each item fades/slides in with a slightly later animation-delay, creating a cascade effect. opacity transitions are smooth and continuous; visibility transitions are discrete, snapping at 50% of the duration.

Question 42 CSS Animations & Transitions

What is transition-property?

Use animation-iteration-count: infinite and make the 100% keyframe match the 0% keyframe, so the loop has no visible jump. Easing that goes past the target value before settling, creating a spring-like feel. Achieved with a cubic-bezier whose y2 > 1. A longhand that names the CSS property (or "all") whose changes should be animated. Defaults to "all". The direction of playback: normal, reverse, alternate (forward then backward), or alternate-reverse. Default is normal.

Question 43 CSS Animations & Transitions

What does animation-fill-mode: both do?

No. display switches values instantly. Use visibility + opacity, or a small transition-delay on display:none to defer the actual hide. 60 frames per second, meaning each frame should complete in ~16.7ms. It permits CSS to interpolate between keyword sizes like auto, allowing transitions on height: auto. Combines forwards and backwards — applies the first keyframe during the delay and the last keyframe after the end.

Question 44 CSS Animations & Transitions

What is a "pop" effect in CSS animation?

A quick scale-up combined with a fade-in, often created with transform: scale(0.8) → scale(1) and opacity: 0 → 1. Applies 2D or 3D transformations (translate, rotate, scale, skew) to an element without affecting surrounding layout. A longhand defining the acceleration curve of the transition: ease, linear, ease-in, ease-out, ease-in-out, steps(), cubic-bezier(). SMIL (, ) is an SVG-native animation system; CSS transitions/animations are preferred because SMIL is deprecated in some browsers.

Question 45 CSS Animations & Transitions

What does animation-fill-mode: none do (the default)?

Both can play on hover, but a :hover transition runs once when the mouse enters and reverses on leave; a :hover animation can repeat while hovered. It defines an acceleration curve, with x = time progress and y = value progress. The shape determines how the animation feels. The element's styles are only affected while the animation is running — before start and after end, it returns to its base styles. Pauses or resumes the animation: running or paused. Can be toggled on hover.

Question 46 CSS Animations & Transitions

What is the difference between @keyframes and @media?

To define the named stages of an animation, listing the styles the element should have at each percentage of the timeline. Combines forwards and backwards — applies the first keyframe during the delay and the last keyframe after the end. @keyframes define animation timelines; @media applies styles based on the environment (viewport, container, user preferences). Divides the animation into a fixed number of discrete jumps instead of a smooth interpolation. steps(4, end) produces 4 visible frames.

Question 47 CSS Animations & Transitions

Can the display property be transitioned smoothly?

No. display switches values instantly. Use visibility + opacity, or a small transition-delay on display:none to defer the actual hide. A longhand defining the acceleration curve of the transition: ease, linear, ease-in, ease-out, ease-in-out, steps(), cubic-bezier(). Set element.style.animationPlayState = 'paused'; or remove/reapply the animation property. Defines what styles the element retains outside the animation runtime: none, forwards, backwards, or both.

Question 48 CSS Animations & Transitions

What is the difference between a transition and a JavaScript-driven animation?

The element's styles are only affected while the animation is running — before start and after end, it returns to its base styles. The transition is effectively disabled — the change is instant, behaving as if no transition were defined. Transitions are declarative, run on the compositor, and don't require JS frames; JS animations (requestAnimationFrame) require code execution per frame. Use animation-iteration-count: infinite and make the 100% keyframe match the 0% keyframe, so the loop has no visible jump.

Question 49 CSS Animations & Transitions

What does the transform property do?

.button { transition: background-color 200ms ease; } .button:hover { background-color: blue; } — smoothly changes color on hover. Easing that goes past the target value before settling, creating a spring-like feel. Achieved with a cubic-bezier whose y2 > 1. Applies 2D or 3D transformations (translate, rotate, scale, skew) to an element without affecting surrounding layout. @property --my-var { syntax: ''; inherits: false; initial-value: #000; }

Question 50 CSS Animations & Transitions

What happens if you set transition-duration without a unit?

A modern CSS feature that lets you animate the visual state change between two DOM states, using view-transition-name and document.startViewTransition. It's invalid in most browsers. Always use s or ms — "transition-duration: 0" defaults to 0s, but "1" is not a valid duration. Use transition: opacity 300ms ease; and toggle a class that sets opacity: 0; the element gradually becomes transparent. The animation jumps at the START of each step; the first value change is shown immediately and n-1 more jumps follow.