CSS Animation: Browser Support, Properties, Issues

What is CSS Animation?

CSS Animation is a W3C standard, defined in the CSS Animations Module Level 1, that animates CSS property values over time using the @keyframes at-rule. The animation shorthand combines name, duration, timing function, delay, iteration count, direction, fill mode, and play state into one declaration. It runs on the browser's compositor without any JavaScript.

Which browsers does CSS Animation support?

CSS Animation works in every modern Chromium, Gecko, and WebKit browser. Chrome 43, Edge 12, Firefox 16, Safari 9, Opera 30, Samsung Internet 4, and Internet Explorer 10 enable it by default, and older versions supported the feature with the -webkit- or -moz- vendor prefix.

What are the key properties of CSS Animation?

CSS Animation builds on the @keyframes at-rule and a set of animation sub-properties that the animation shorthand combines. Each sub-property controls one axis of the animation, and most pages set them through the shorthand for clarity.

• @keyframes: The at-rule that defines the keyframes. Each block lists a percentage or the from and to keywords, plus the CSS properties to apply at that point. The browser interpolates between the listed stops.
• animation-name: Points the element at one or more @keyframes rules by name. The value none disables the animation without removing the rule.
• animation-duration: Sets how long one cycle takes, in seconds or milliseconds. A value of 0s skips the animation entirely.
• animation-timing-function: Controls the rate curve. Accepts ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(), and cubic-bezier().
• animation-delay: Pushes the start time forward, or with a negative value starts the animation mid-cycle.
• animation-iteration-count: Runs the keyframes a fixed number of times, or infinite for a continuous loop.
• animation-direction: Picks normal, reverse, alternate, or alternate-reverse to play forward, backward, or back and forth.
• animation-fill-mode: Decides whether the element holds the from values before the animation starts, the to values after it ends, both, or none.
• animation-play-state: Pauses or resumes a running animation through the running and paused values, useful for hover and focus interactions.
• animation: The shorthand that combines every sub-property in one declaration, plus animation-timeline for scroll-driven animations on Chrome 115+.

How do you create a CSS animation?

A CSS animation needs a @keyframes rule that lists the steps and an animation declaration on the target element that picks the rule and the timing. The browser does the rest, no JavaScript or library required.

• Define the keyframes: Write a @keyframes block with a name and the CSS property values at each stop. Use from and to for a two-step animation, or percentages for finer control.
• Pick the target element: Add a class or selector for the element you want to animate, so the keyframes only run on the elements you choose.
• Apply the animation shorthand: Set animation: name duration timing-function delay iteration-count direction fill-mode play-state on the target. The shorthand reads left to right, and any missing slot falls back to the default.
• Pick GPU-friendly properties: Animate transform and opacity for the smoothest result. Animating top, left, width, or height triggers layout on every frame and can cause jank on low-end devices.
• Test prefers-reduced-motion: Wrap the animation in a @media (prefers-reduced-motion: no-preference) query, so users who turned reduced motion on do not see a jarring effect.
• Verify support with feature detection: Run the snippet below in DevTools to confirm the browser advertises the animation property before falling back to a static state.

// Feature-detect CSS Animation in any modern browser
const supportsCssAnimation = () => {
    const probe = document.createElement("div").style;
    return "animation" in probe || "webkitAnimation" in probe;
};

if (supportsCssAnimation()) {
    console.log("CSS Animation is available, ready to attach @keyframes rules");
} else {
    console.log("CSS Animation is missing, fall back to a static UI state");
}

If the console logs the missing branch, the page is on Internet Explorer 9 or older, Opera Mini, or a stale Android Browser, and a non-animated state should ship instead.

What are the known issues with CSS Animation?

CSS Animation has wide cross-browser support, but the small differences in how Chromium, Gecko, and WebKit handle keyframes, transforms, and timing still hit production code. Plan around these before you ship a heavy animation.

• Safari composites differently from Blink: Safari on macOS and iOS promotes animated elements to their own compositor layer aggressively, which can break the stacking order on a parent that has overflow: hidden, border-radius, or a backdrop-filter. The same keyframes that look right on Chrome can render with a hard edge on Safari.
• Firefox interpolates discrete properties differently: Firefox treats some properties as non-animatable that Chrome interpolates, which leaves a keyframe stuck at the from value on Gecko. The CSS Animations Level 2 draft pins down the rules, but every shipping browser does not yet match the spec exactly.
• Vendor prefix drift on legacy browsers: Chrome 4 to 42, Safari 5.1 to 8, Firefox 5 to 15, and the legacy Android Browser need -webkit- or -moz- prefixes on both the animation property and the @keyframes block. A modern stylesheet that drops the prefixes silently breaks on those browsers.
• Internet Explorer 9 and Opera Mini have no support: IE 5.5 to 9 and Opera Mini do not implement @keyframes, and the animation property is treated as an unknown declaration. Pages that rely on a keyframe to reveal content keep the from state forever on those clients.
• animation-timeline is Chromium-only: The scroll-driven animation extension lands first in Chrome 115+ and Edge 115+, while Safari and Firefox still gate it behind a flag. Polyfill the feature with the scroll-timeline.js shim, or fall back to a static layout on the missing engines.
• prefers-reduced-motion is honored inconsistently: Most browsers respect the media query, but a few WebView builds on Android still ignore it. In my experience, the safest pattern is to write the reduced-motion query first and then add the full keyframes inside the no-preference branch, so the default state is the calm one.

Citations

All CSS Animation version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Animations Module Level 1: w3.org/TR/css-animations-1
• CSS Working Group editor's draft, CSS Animations: drafts.csswg.org/css-animations
• MDN CSS animation property: developer.mozilla.org/en-US/docs/Web/CSS/animation
• MDN CSS Animations module overview: developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations
• MDN @keyframes at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
• MDN Detecting CSS animation support: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support
• MDN prefers-reduced-motion media query: developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
• WebKit blog, CSS Animation: webkit.org/blog/138/css-animation
• Chrome Platform Status, scroll-driven animations: chromestatus.com/feature/6396473867927552
• Wikipedia CSS animations: en.wikipedia.org/wiki/CSS_animations
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support