Title: CSS Animations And Transitions — LearnCoachAssist

Q: What is the main purpose of CSS transitions?
A: To animate smoothly between two states of a property when it changes, interpolating intermediate values over time.

Q: What is the main purpose of CSS animations?
A: To animate an element through multiple keyframes over time, including loops and complex multi-step sequences, without needing state changes.

Q: Which CSS property enables a transition?
A: transition: ; shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.

Q: What is transition-property?
A: A longhand that names the CSS property (or "all") whose changes should be animated. Defaults to "all".

Q: What is transition-duration?
A: A longhand that sets how long the transition runs, in seconds (0.3s) or milliseconds. Default is 0s, meaning no transition.

Q: What is transition-delay?
A: A longhand that sets how long to wait after the change before the transition begins. Default is 0s.

Q: What is transition-timing-function?
A: A longhand defining the acceleration curve of the transition: ease, linear, ease-in, ease-out, ease-in-out, steps(), cubic-bezier().

Q: What is the default timing function for transitions?
A: ease (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)).

Q: What does the cubic-bezier() function take?
A: Four numbers P1x, P1y, P2x, P2y in the range 0–1 (for x) defining the control points of a cubic Bézier curve describing speed over time.

Q: What does the steps() timing function do?
A: Divides the animation into a fixed number of discrete jumps instead of a smooth interpolation. steps(4, end) produces 4 visible frames.

Q: What does steps(n, jump-end) mean?
A: 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.

Q: What does steps(n, jump-start) mean?
A: The animation jumps at the START of each step; the first value change is shown immediately and n-1 more jumps follow.

Q: What is the difference between steps() and a normal easing function?
A: steps() produces discrete, staircase-like progress; normal easing functions produce continuous, smooth interpolation.

Q: What is the shorthand syntax for a transition on one property?
A: transition: opacity 200ms ease-in-out; — property, duration, timing-function, optional delay (delay must be the second time value).

Q: Can a transition include multiple properties in one declaration?
A: Yes. transition: opacity 200ms, transform 300ms ease-out; sets separate durations and easings for each property.

Q: What happens if you set transition-duration: 0?
A: The transition is effectively disabled — the change is instant, behaving as if no transition were defined.

Q: When does a transition actually start?
A: When the value of a watched property changes, typically triggered by a pseudo-class (:hover, :focus), a class change, or a JavaScript style update.

Q: What kinds of property changes can be transitioned?
A: Only animatable properties with a defined interpolation between values. Discrete properties like display cannot be smoothly transitioned.

Q: Can the display property be transitioned smoothly?
A: No. display switches values instantly. Use visibility + opacity, or a small transition-delay on display:none to defer the actual hide.

Q: Can you transition visibility like opacity?
A: visibility is special — it can be transitioned but jumps at the midpoint (visible from 0–50%, hidden from 50–100%) when using linear timing.

Q: Which CSS property makes an element animatable through keyframes?
A: animation, used together with @keyframes to define the sequence.

Q: What is the @keyframes rule used for?
A: To define the named stages of an animation, listing the styles the element should have at each percentage of the timeline.

Q: What is the syntax of a @keyframes block?
A: @keyframes name { 0% { ... } 50% { ... } 100% { ... } } — percentages (or "from" and "to") mark keyframe positions.

Q: What does the animation-name property do?
A: Specifies which @keyframes rule to use. Without it, no animation runs.

Q: What does animation-duration do?
A: Sets the total length of one animation cycle (e.g. 2s). Default is 0s, meaning the animation is disabled.

Q: What does animation-iteration-count control?
A: How many times the animation cycle repeats. Use a number (3) or infinite for endless looping. Default is 1.

Q: What does animation-direction control?
A: The direction of playback: normal, reverse, alternate (forward then backward), or alternate-reverse. Default is normal.

Q: What does animation-fill-mode do?
A: Defines what styles the element retains outside the animation runtime: none, forwards, backwards, or both.

Q: What does animation-play-state do?
A: Pauses or resumes the animation: running or paused. Can be toggled on hover.

Q: What is the animation shorthand order?
A: animation: name duration timing-function delay iteration-count direction fill-mode play-state; — only the first two are required.

Q: What is the difference between transition-delay and animation-delay?
A: transition-delay defers a single change event; animation-delay defers the start of the first iteration of a keyframe animation.

Q: What is the difference between animation and transition?
A: A transition needs a state change trigger and runs once between two values; an animation runs automatically, can loop, and uses multi-step keyframes.

Q: What does will-change do, and why is it used with animations?
A: It hints to the browser that an element will be animated, often promoting it to its own compositor layer to improve performance.

Q: Name three animatable transform functions used in transitions/animations.
A: translate, rotate, scale (plus skew and matrix).

Q: Why is it preferable to animate transform and opacity over top/left?
A: transform and opacity are usually promoted to the GPU and don't trigger layout or paint, only composite, so they animate more smoothly.

Q: What causes a "layout thrash" during animation?
A: Animating properties that affect layout (width, height, top, left, margin) forces the browser to recalculate layout every frame, hurting performance.

Q: What does compositing mean in browser rendering?
A: The final step where painted layers are combined into the screen image. Animations on transform/opacity can be done in this stage alone.

Q: What is the typical frame rate browsers aim for?
A: 60 frames per second, meaning each frame should complete in ~16.7ms.

Q: What is easing?
A: The function that maps time progress to animation progress, controlling the perceived acceleration and deceleration of motion.

Q: What does the ease-in timing function do?
A: Starts slow and accelerates toward the end (cubic-bezier(0.42, 0, 1, 1)).

Q: What does the ease-out timing function do?
A: Starts fast and decelerates toward the end (cubic-bezier(0, 0, 0.58, 1)), good for elements coming to rest.

Q: What does the ease-in-out timing function do?
A: Accelerates in the middle and is slow at the start and end (cubic-bezier(0.42, 0, 0.58, 1)).

Q: What does the linear timing function do?
A: Constant speed from start to end (cubic-bezier(0, 0, 1, 1)).

Q: What is a Bézier curve used for in CSS easing?
A: It defines an acceleration curve, with x = time progress and y = value progress. The shape determines how the animation feels.

Q: What does animation-timing-function apply to?
A: It sets the easing between each pair of adjacent keyframes, not across the whole animation, so different keyframe pairs can use different easings.

Q: Can each keyframe in a @keyframes block have its own timing function?
A: Yes. Each keyframe selector can include its own animation-timing-function to control how it moves to the next.

Q: What does the "prefers-reduced-motion" media query do?
A: It detects the user's OS-level setting to reduce motion; designers use it to disable or simplify animations for accessibility.

Q: How do you respect reduced motion preferences in CSS?
A: Wrap heavy animations in @media (prefers-reduced-motion: no-preference) { ... } or use prefers-reduced-motion: reduce to override durations.

Q: What is a keyframe percentage?
A: A marker like 0%, 50%, or 100% inside @keyframes that defines the styles at that point of the animation timeline.

Q: What happens at 0% and 100% if you omit one in @keyframes?
A: The browser uses the element's current style for the missing endpoint. "from" is shorthand for 0%, "to" for 100%.

Q: Can a single @keyframes block target multiple properties?
A: Yes. Each keyframe selector can set any number of properties (transform, opacity, color, etc.) and all are interpolated.

Q: What is the difference between opacity: 0 and visibility: hidden?
A: 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.

Q: How do you fade an element out smoothly?
A: Use transition: opacity 300ms ease; and toggle a class that sets opacity: 0; the element gradually becomes transparent.

Q: What does the transform property do?
A: Applies 2D or 3D transformations (translate, rotate, scale, skew) to an element without affecting surrounding layout.

Q: What is the transform-origin property?
A: Sets the point around which transforms are applied. Default is 50% 50% (the element's center).

Q: What does transform: translate(50px, 0) do?
A: Moves the element 50 pixels to the right, without affecting its position in the document flow.

Q: What does transform: scale(1.5) do?
A: Enlarges the element to 1.5 times its size, with respect to transform-origin.

Q: What does transform: rotate(45deg) do?
A: Rotates the element 45 degrees clockwise.

Q: What does the order of transform functions matter?
A: Yes. transform: rotate(45deg) translateX(100px) is not the same as translateX(100px) rotate(45deg); transforms apply right-to-left.

Q: What is a 3D transform?
A: A transform using functions like translate3d, rotateX, rotateY, rotateZ, or perspective that gives the element depth.

Q: What does perspective do in CSS?
A: Sets the distance from the viewer to the z=0 plane, controlling the apparent depth of 3D transforms.

Q: What is the difference between perspective on the parent and on the element?
A: perspective on the parent affects all child 3D transforms collectively; perspective() as a transform function affects only that element.

Q: What does transform-style: preserve-3d do?
A: Makes child elements keep their 3D position relative to each other and the parent, instead of being flattened to the 2D plane.

Q: What does backface-visibility control?
A: 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.

Q: What is the difference between transition and transform?
A: transform is a property that changes an element's geometry; transition is a feature that animates ANY animatable property when its value changes.

Q: What is the most common mistake when writing the transition shorthand?
A: Forgetting that the first time value is duration and the second is delay. transition: opacity 1s 200ms; means 1s duration, 200ms delay.

Q: What happens if you set transition-duration without a unit?
A: It's invalid in most browsers. Always use s or ms — "transition-duration: 0" defaults to 0s, but "1" is not a valid duration.

Q: What is the difference between @keyframes and @media?
A: @keyframes define animation timelines; @media applies styles based on the environment (viewport, container, user preferences).

Q: What does the animation-fill-mode: backwards value do?
A: Applies the first keyframe's styles to the element during the animation-delay period, before the animation actually starts.

Q: What does the animation-fill-mode: forwards value do?
A: Keeps the last keyframe's styles applied to the element after the animation ends, instead of reverting to the original.

Q: What does animation-fill-mode: both do?
A: Combines forwards and backwards — applies the first keyframe during the delay and the last keyframe after the end.

Q: How do you make a CSS animation loop seamlessly?
A: Use animation-iteration-count: infinite and make the 100% keyframe match the 0% keyframe, so the loop has no visible jump.

Q: What is a "ping-pong" animation?
A: An animation that runs forward and then backward, achieved with animation-direction: alternate.

Q: What is a common trick to stagger multiple animations?
A: Set a different animation-delay on each element so they start at offset times, creating a cascading effect.

Q: What is the animation-delay: -1s trick?
A: A negative delay starts the animation as if it had already been running, useful for beginning an animation mid-cycle.

Q: What is the difference between animation-iteration-count: infinite and infinite duration?
A: Iteration count controls how many times the cycle repeats; duration controls the length of one cycle. They are independent.

Q: What is the "transitionend" event?
A: A JavaScript event fired on an element when a CSS transition completes, useful for chaining animations or cleanup.

Q: What is the "animationend" event?
A: A JavaScript event fired on an element when one iteration of a CSS animation finishes.

Q: How can you animate a custom property (CSS variable)?
A: Register the property with @property, give it a syntax and initial-value, then it can be transitioned/animated with @keyframes.

Q: What does the @property rule do?
A: It declares a custom property with an explicit type, initial value, and inheritance, enabling the property to be animated.

Q: What is the typical syntax of @property?
A: @property --my-var { syntax: ''; inherits: false; initial-value: #000; }

Q: What is the difference between transition: all 300ms and transition: transform 300ms?
A: "all" animates every changing property, which can cause unintended animations; naming a specific property is safer and more performant.

Q: What is a "pop" effect in CSS animation?
A: A quick scale-up combined with a fade-in, often created with transform: scale(0.8) → scale(1) and opacity: 0 → 1.

Q: How do you make an element spin continuously?
A: animation: spin 1s linear infinite; with @keyframes spin { to { transform: rotate(360deg); } }.

Q: What is a common use of transition on hover?
A: .button { transition: background-color 200ms ease; } .button:hover { background-color: blue; } — smoothly changes color on hover.

Q: Why is animating height: auto not directly possible?
A: Because auto has no fixed numeric value to interpolate from. Workarounds include max-height with a large value, or interpolate-size: allow-keywords.

Q: What does interpolate-size: allow-keywords enable?
A: It permits CSS to interpolate between keyword sizes like auto, allowing transitions on height: auto.

Q: What is a "spinner" in CSS?
A: A small rotating element used to indicate loading, usually made with animation: spin 1s linear infinite and border-radius: 50%.

Q: What is the difference between visibility and opacity transitions?
A: opacity transitions are smooth and continuous; visibility transitions are discrete, snapping at 50% of the duration.

Q: How do you make a pulsing button?
A: animation: pulse 1.5s ease-in-out infinite; with @keyframes pulse that scales between 1 and 1.05.

Q: What is a common way to animate SVG paths?
A: Use stroke-dasharray and stroke-dashoffset with CSS transition/animation to "draw" the path from start to end.

Q: What is stroke-dasharray?
A: 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.

Q: What does animating stroke-dashoffset do?
A: It moves the dash pattern along the path, which is commonly used to create a "drawing" or "erasing" effect on SVG strokes.

Q: What is the difference between transitions and SMIL animations?
A: SMIL (, ) is an SVG-native animation system; CSS transitions/animations are preferred because SMIL is deprecated in some browsers.

Q: What is FLIP in CSS animation?
A: A technique: First, Last, Invert, Play — used to animate layout changes smoothly. JS measures positions, then CSS transitions handle the visual move.

Q: What is the "view-transition" API?
A: A modern CSS feature that lets you animate the visual state change between two DOM states, using view-transition-name and document.startViewTransition.

Q: How does the view-transition-name property work?
A: It gives an element a unique name so the browser can match it between two states and animate its position, size, and appearance.

Q: What is the simplest hover effect with transition?
A: .button { background: #ccc; transition: background 200ms; } .button:hover { background: #888; } — a smooth color change.

Q: What is the difference between a transition and a JavaScript-driven animation?
A: Transitions are declarative, run on the compositor, and don't require JS frames; JS animations (requestAnimationFrame) require code execution per frame.

Q: How do you pause a CSS animation with JS?
A: Set element.style.animationPlayState = 'paused'; or remove/reapply the animation property.

Q: How do you restart a CSS animation?
A: Remove the animation property (or set animation: none), force a reflow (e.g. element.offsetWidth), then re-add the original animation.

Q: What is a common accessibility issue with CSS animations?
A: Continuous motion can trigger discomfort or vestibular issues; mitigate with prefers-reduced-motion.

Q: What is "scroll-driven animation" in CSS?
A: A modern feature where an animation is tied to a scroll timeline (animation-timeline: scroll()), so progress is driven by scroll position rather than time.

Q: What is animation-timeline?
A: A property that replaces animation-duration, animation-delay, and animation-iteration-count when the animation is driven by a scroll or view timeline.

Q: What does scroll-behavior: smooth do?
A: Animates the scroll of an anchor link or programmatic scrollTo call over a short period, rather than snapping.

Q: What does a "stagger" mean in CSS animation?
A: Applying slightly different animation-delay values to a group of elements so they animate sequentially rather than all at once.

Q: What is the role of transform: translateZ(0)?
A: It hints the GPU to promote the element to its own layer, sometimes used as a legacy performance trick (modern code prefers will-change).

Q: What is will-change: transform, opacity?
A: A hint to the browser that those properties will change, allowing it to pre-allocate compositor layers for smoother animation.

Q: What are the downsides of overusing will-change?
A: Each layer consumes memory and GPU resources; using it on many elements can hurt overall performance.

Q: What is the difference between a transition and a CSS animation triggered by :hover?
A: 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.

Q: What does animation-fill-mode: none do (the default)?
A: The element's styles are only affected while the animation is running — before start and after end, it returns to its base styles.

Q: How do you make a slide-in effect from the left?
A: @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } and apply it with a duration and easing.

Q: What is "overshoot" easing and how is it achieved?
A: Easing that goes past the target value before settling, creating a spring-like feel. Achieved with a cubic-bezier whose y2 > 1.

Q: What is the difference between a "to" and "100%" keyframe?
A: They are equivalent — "to" is just an alias for 100%, and "from" is an alias for 0%.

Q: What does display: none do to running animations/transitions?
A: Stopping the element from being rendered cancels any active animations or transitions; the animationend/transitionend events are NOT fired when this happens.

Q: How do you keep a transition target reachable for screen readers?
A: Pair opacity/transform with visibility: hidden/visible (or display: none after a delay) so assistive tech treats it correctly.

Q: Why might transition: all cause performance issues?
A: Because it animates EVERY changing property, including unintended ones like transform or filter, which can be expensive.

Q: What is a "ripple" effect in CSS?
A: A circular highlight that expands and fades from a click point, typically achieved with an absolutely positioned element, scale animation, and opacity transition.

Q: What is the difference between animating width and animating transform: scaleX?
A: scaleX uses the GPU and doesn't trigger layout; width triggers reflow every frame and is much slower for animation.

Q: What is a "staggered list" animation?
A: A list where each item fades/slides in with a slightly later animation-delay, creating a cascade effect.