Animating with CSS @keyframes

Using the `@keyframes` at-rule to build multi-step, self-running animation timelines, independent of `:hover` or other state-driven transitions.

Content tagged keyframes

• Tutorial:Animate and Type-Check CSS Variables with @property

  Give CSS custom properties real types so they animate.

  Register CSS custom properties (CSS variables) with @property — a syntax, an inherits rule and an initial value — so they animate in transitions and keyframes, fall back safely on invalid values and always have a default. Covers rotating gradients, counting numbers and per-axis motion, CSS.registerProperty(), performance, browser fallbacks and common pitfalls.

• Post:Mastering CSS steps() for Discrete, Stepped Animations

  Master discrete frame-based jumps in CSS animations.

  A comprehensive guide to the CSS steps() function, detailing its syntax, parameters, and practical applications for creating unique, stepped animation effects in web design. Boost your CSS animation skills.

• Post:An Interactive Guide to CSS Keyframes

  Bring static designs to life with keyframes

  Master multi-step CSS animations using @keyframes. Learn control, performance, GPU optimization, and advanced web motion.

• Post:Animating SVG: A Guide to CSS Transitions and Keyframes

  Bring static shapes to life with transitions and @keyframes.

  Learn how to animate SVG with CSS: transitions vs @keyframes, self-drawing lines, clip-path reveals, staggered delays, motion paths, shape morphing, and scroll-driven timelines.