CSS transitions animate property changes smoothly over time, defined with `transition: property duration timing-function delay`. When a listed property changes (for example, a button's background on hover), the browser interpolates the value across the duration using the specified timing function. Common functions include `ease` (slow start, fast middle, slow end), `linear` for constant speed, `ease-in` for a slow start, `ease-out` for a slow end, `ease-in-out` for slow start and end, `cubic-bezier(x1, y1, x2, y2)` for custom curves (where y can exceed 1 for overshoot or go negative for anticipation), and `steps(n)` for discrete jumps. CSS animations extend this idea with `@keyframes` rules that define multi-step sequences, can run automatically without a trigger, and support looping. Key animation properties include `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction` (normal, reverse, or alternate), and `animation-fill-mode`. The `forwards` value retains the last keyframe's styles after the animation finishes, `backwards` applies the first keyframe's styles during the delay, and `both` combines both behaviors, with `forwards` being essential for one-shot animations that need to leave a visible end state.
The `transform` property applies 2D or 3D transformations like `translate(x, y)`, `rotate(deg)`, `scale(x, y)`, and `skew(x, y)` without affecting document flow. Transforms are GPU-accelerated and ideal for animation because they require only a composite step rather than triggering layout reflows, making them far cheaper to animate than properties like `margin`, `top`, or `left`, which force the browser to recalculate positions of nearby elements and cause jank. The `will-change` property hints to the browser that an element is likely to change (transform, opacity, or scroll-position are common candidates), allowing it to promote the element to its own compositor layer for smoother animation. To avoid wasting GPU memory, `will-change` should be applied just before the change occurs and removed when the change is done rather than being set permanently on every element.
Several properties add visual richness to interfaces. The `filter` property applies graphical effects such as `blur()`, `grayscale()`, `brightness()`, `contrast()`, `hue-rotate()`, `saturate()`, `sepia()`, `invert()`, and `drop-shadow()`, with multiple functions chainable in one declaration. The `backdrop-filter` property applies filters to the area behind an element, enabling frosted-glass effects on translucent panels when paired with a translucent background color. The `mix-blend-mode` property controls how an element's content blends with the background using compositing modes like `multiply`, `screen`, and `overlay`, while `isolation: isolate` on a parent limits blending to within that subtree. For media elements, `object-fit` controls how replaced content like images and videos is resized to fit its container (with values `fill`, `contain`, `cover`, `none`, and `scale-down`), and `object-position` controls the focal point when cropping, which is useful for keeping faces visible in responsive portrait crops. SVG and `
Scroll-driven and rendering optimizations add further polish. `scroll-behavior: smooth` on the `html` or a scroll container animates all programmatic scrolls smoothly, including anchor link navigation. `scroll-snap-type` paired with `scroll-snap-align` enables snap behavior for carousels and galleries without JavaScript, with `mandatory` forcing snapping and `proximity` allowing skips. `scroll-padding` adds an offset inside a scroll container when snapping or jumping to anchors, preventing content from sticking to the top edge under a sticky header. `overscroll-behavior: contain` prevents scroll chaining from a child element into its parent (essential for modal dialogs), while `none` also blocks pull-to-refresh. The `scrollbar-gutter: stable` declaration reserves space for the scrollbar even when there is no overflow, preventing layout shifts when content grows to need scrolling. For performance, `contain: layout` tells the browser that an element's internal layout is independent of the rest of the page, allowing it to skip reflow work elsewhere, and `content-visibility: auto` skips rendering work for off-screen elements until they approach the viewport, acting like CSS lazy-loading for layout. The View Transitions API, called via `document.startViewTransition(() => updateDOM())`, enables smooth animated transitions between DOM states using `::view-transition-group`, `::view-transition-old`, and `::view-transition-new` pseudo-elements, replacing much of the JavaScript animation work needed for SPA-feel transitions.