Custom Properties and Animations

A CSS transition interpolates between two states and only runs when a value actually changes, typically on :hover or a class toggle. A @keyframes animation declares many intermediate stops, starts on its own, and can loop, alternate direction, and be paused.

It animates only opacity over 300ms with an ease-in curve, starting after a 100ms delay. In the transition shorthand the components are order-free by type, except that the first time value is always the duration and the second is the delay.

CSS custom properties are real values in the cascade: they inherit, can be redefined per selector or per element, and the browser resolves them at computed-value time. Sass variables are compile-time text that never reaches the browser.

animation-fill-mode decides whether keyframe values apply outside the animation's active run. The default none applies nothing before or after; forwards holds the final keyframe after it ends; backwards applies the first keyframe during the delay; both does each.

Opt-in puts animation inside a no-preference query, so anything you forget simply never moves. Opt-out ships motion to everyone and removes it in a reduce query, so any animation you forget to undo still plays for people who asked for less.

animation-timeline: scroll() drives an animation by a scroll container's scroll position instead of by elapsed time. Progress 0% is scrolled fully to the start, 100% fully to the end, and scrolling back runs the animation backwards.

Animating transform and opacity changes neither an element's layout box nor the pixels painted inside it, so engines can run those animations on the compositor. Animating left, top, or width re-runs layout on every frame.

A transition interpolates between two computed values of the same type, and auto is a keyword, not a length, so there is nothing to interpolate and the height jumps. Common fixes are animating max-height, animating a wrapper's grid-template-rows from 0fr to 1fr, or opting keywords in with interpolate-size.

The browser reads an operating-system accessibility setting and exposes it to CSS as one of two values: reduce when the user asked for less motion, and no-preference otherwise. The bare query without a value matches only reduce, because no-preference evaluates as false in boolean context.

Percentages in translate() resolve against the element's own border box — X against its own width, Y against its own height. That lets an element pull itself back by half its own size without anyone knowing that size in advance.

Custom properties are inherited properties resolved separately for every element. var(--accent) is substituted with whatever --accent computes to on the element being styled, so each card that inherits or declares a different --accent gets a different border color from the same rule.

A CSS animation dispatches animationstart, animationiteration between iterations, animationend on completion, and animationcancel if it stops early. animationend never fires when animation-iteration-count is infinite, or when the animation is removed or the element stops being rendered.

The browser synthesises the missing 0% or 100% stop from the element's own computed value for each animated property. A property declared in only some keyframes interpolates between the stops that do declare it, using that computed value as the implicit endpoint.

In the animation shorthand the first time value is animation-duration and the second is animation-delay, regardless of their size. Every longhand you omit is reset to its initial value, so a shorthand written later silently wipes an earlier animation-fill-mode or animation-play-state.

Remove large-area movement — long translations, zooms, parallax, spinning or bouncing content — because that is what triggers vestibular symptoms. Keep small, localised, essential motion such as a progress indicator, and substitute a short opacity crossfade or an instant state change where the animation was carrying feedback.

scroll() tracks how far a scroll container has been scrolled, so progress is the same for every element using it. view() tracks one specific element's journey through the scrollport, so each element progresses on its own schedule.

Transform functions apply left to right, each operating in the coordinate system the previous one left behind. Rotating first tilts the axes, so the following translateX moves along a diagonal instead of straight right.

They are the x and y coordinates of the two control points of a cubic Bezier curve whose endpoints are fixed at (0,0) and (1,1), mapping elapsed time to progress. The x values must stay within 0 to 1, but y may go below 0 or above 1, which produces anticipation and overshoot.

transitionend fires once per transitioned longhand property, not once per element, and it bubbles — so a three-property transition dispatches three events, distinguished by the event's propertyName. It never fires when no transition was generated (zero duration, or no computed-value change) or when the transition is cancelled, which dispatches transitioncancel instead.

var() is checked when values compute, not when CSS parses. The var() declaration looks valid at parse time, so it wins the cascade and discards color: black; substituting 12px then makes it invalid at computed-value time, so color falls back to the inherited value.

A keyframe animation is created when an element's computed animation-name gains a value and destroyed when it loses one. Remove and re-add in one task and the computed value is identical at the next style recalculation, so the browser sees no change and no new animation starts.

A near-zero duration still runs the animation, so animationend and transitionend fire and script that waits on them keeps working; animation: none suppresses them and can leave such code stalled forever. The reset is a safety floor, not a design: it flattens motion instead of substituting something gentler.

animation-range picks which slice of a progress timeline the animation occupies. On a view timeline you express the endpoints with named ranges — cover, contain, entry, exit — plus optional percentage offsets, instead of using a time-based duration.

scroll-timeline-name gives a scroller's timeline a --dashed-ident that descendants can reference from animation-timeline. When the animated element is not a descendant, timeline-scope on a common ancestor hoists the name so both sides can see it.

will-change tells the browser which properties are about to change so it can prepare, usually by giving the element its own composited layer. Each layer costs memory, so applying it broadly wastes resources and slows the page.

There is no fade-in because an element leaving display: none is rendered for the first time and has no before-change value to transition from — @starting-style supplies one. The fade-out fails because display is a discrete property that flips immediately, hiding the element; transition-behavior: allow-discrete defers that flip to the end.

Author the finished, static state as the base style and layer the animation inside @supports (animation-timeline: view()). Unsupported browsers get the correct end state with no motion, and no fallback script is needed.

The perspective property on a parent gives all its children one shared vanishing point, so they read as objects in a single scene. The perspective() function inside a child's own transform gives that child its own vanishing point, projected from its own origin.

@property registers a custom property with a syntax type, an inherits flag and an initial-value. That buys type checking, a real fallback instead of an unset value, the ability to opt out of inheritance, and values the browser can interpolate.