CSS Animations | CSS Features

`animation`

Property Baseline: widely availablesince March 2018 Modern CSS: Scroll-driven animations

MDN The animation CSS shorthand property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline.

Live preview Example from MDN

#example-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slide-in {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
</section>

Syntax

<single-animation>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: see individual properties
Canonical order: per grammar
Animation type: not animatable
Longhands: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, animation-timeline

Browser support

First browser version supporting animation
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-composition`

Property Baseline: widely availablesince January 2026 Modern CSS: animation-composition

MDN The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.

Live preview Example from MDN

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.container {
  flex: 1;
  min-width: 200px;
  height: 200px;
  background: lightblue;
  display: inline-block;
  text-align: center;
}

.target {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  margin: 20px 0;
}

@keyframes slide {
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateX(150px);
  }
}

.target {
  transform: translateX(30px) rotate(45deg);
  animation: slide 5s linear infinite;
}
#replace {
  animation-composition: replace;
}
#add {
  animation-composition: add;
}
#accumulate {
  animation-composition: accumulate;
}

<div class="container">
  replace
  <div id="replace" class="target"></div>
</div>
<div class="container">
  add
  <div id="add" class="target"></div>
</div>
<div class="container">
  accumulate
  <div id="accumulate" class="target"></div>
</div>

Syntax

<single-animation-composition>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: replace
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a keyword as specified
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-composition
Chrome	112
Edge	112
Firefox	115
Safari	16
Chrome Android	112
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-delay`

Property Baseline: widely availablesince March 2018

MDN The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

Live preview Example from MDN

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#play-status {
  font-weight: bold;
}

.animating {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a delay to start!</div>
</section>

const el = document.getElementById("example-element");
const status = document.getElementById("play-status");

function update() {
  status.textContent = "delaying";
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className = "animating";
    });
  });
}

el.addEventListener("animationstart", () => {
  status.textContent = "playing";
});

el.addEventListener("animationend", () => {
  status.textContent = "finished";
});

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();

Syntax

[ <'animation-delay-start'> <'animation-delay-end'>? ]#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: animation-delay-start, animation-delay-end

Browser support

First browser version supporting animation-delay
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-delay-end`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<time [0s,∞]>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0s
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a duration
Canonical order: per grammar
Animation type: not animatable

Specification ↗

`animation-delay-start`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<time>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0s
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a duration
Canonical order: per grammar
Animation type: not animatable

Specification ↗

`animation-direction`

Property Baseline: widely availablesince March 2018

MDN The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

Live preview Example from MDN

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Syntax

<single-animation-direction>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a keyword as specified
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-direction
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-duration`

Property Baseline: widely availablesince March 2018

MDN The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.

Live preview Example from MDN

#example-element {
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Syntax

[ auto | <time [0s,∞]> ]#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either a time or the keyword auto
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-duration
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-fill-mode`

Property Baseline: widely availablesince March 2018

MDN The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

Live preview Example from MDN

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#play-status {
  font-weight: bold;
}

.animating {
  animation: slide 1s ease-in 1;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a mode to start!</div>
</section>

const el = document.getElementById("example-element");
const status = document.getElementById("play-status");

function update() {
  status.textContent = "delaying";
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className = "animating";
    });
  });
}

el.addEventListener("animationstart", () => {
  status.textContent = "playing";
});

el.addEventListener("animationend", () => {
  status.textContent = "finished";
});

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();

Syntax

<single-animation-fill-mode>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a keyword as specified
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-fill-mode
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-iteration-count`

Property Baseline: widely availablesince March 2018

MDN The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

Live preview Example from MDN

#example-element {
  align-items: center;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: center;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#play-status {
  font-weight: bold;
}

.animating {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-in;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a count to start!</div>
</section>

const el = document.getElementById("example-element");
const status = document.getElementById("play-status");

function update() {
  status.textContent = "delaying";
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className = "animating";
    });
  });
}

el.addEventListener("animationstart", () => {
  status.textContent = "playing";
});

el.addEventListener("animationend", () => {
  status.textContent = "finished";
});

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();

Syntax

<single-animation-iteration-count>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 1
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either a number or the keyword infinite
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-iteration-count
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-name`

Property Baseline: widely availablesince March 2018

MDN The animation-name CSS property specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element. Multiple @keyframes at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframes at-rule, no properties are animated.

Live preview Example from MDN

#example-element {
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

@keyframes bounce {
  from {
    background-color: orange;
    color: black;
    margin-top: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-top: 40%;
  }
}

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
</section>

Syntax

[ none | <keyframes-name> ]#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either a case-sensitive css identifier or the keyword none
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-name
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-play-state`

Property Baseline: widely availablesince March 2018

MDN The animation-play-state CSS property sets whether an animation is running or paused.

Live preview Example from MDN

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.animating {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
</section>

Syntax

<single-animation-play-state>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: running
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a keyword as specified
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-play-state
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-timeline`

Property Baseline: newly availablesince October 2026 Modern CSS: Scroll-driven animations

MDN The animation-timeline CSS property specifies the timeline used to control the progress of a CSS animation.

Live preview Example from MDN

article {
  display: flex;
  gap: 10px;
  text-align: center;
}
section {
  background-color: beige;
  padding: 20px;
}
section::after {
  content: attr(id);
  display: block;
}
div {
  height: 100px;
  width: 100px;
  background-color: magenta;
  animation: rotate 2s infinite alternate linear;
}
@keyframes rotate {
  to {
    rotate: 1turn;
  }
}

#none div {
  animation-timeline: none;
}
#auto div {
  animation-timeline: auto;
}

@layer no-support {
  @supports not (animation-timeline: none) {
    body::before {
      content: "Your browser doesn't support the `animation-timeline` property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

<article>
  <section id="none">
    <div></div>
  </section>
  <section id="auto">
    <div></div>
  </section>
  <section id="default">
    <div></div>
  </section>
</article>

Syntax

<single-animation-timeline>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either the keyword none, the keyword auto, a case-sensitive css identifier, a computed scroll() function, or a computed view() function
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-timeline
Chrome	115
Edge	115
Firefox	159
Safari	26
Chrome Android	115
Safari iOS	26

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`animation-timing-function`

Property Baseline: widely availablesince March 2018

MDN The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

Live preview Example from MDN

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

Syntax

<easing-function>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: ease
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a computed <easing-function>
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting animation-timing-function
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`@keyframes`

At-rule Baseline: widely availablesince March 2018

Spec Keyframes are specified using the @keyframes at-rule, defined as follows:

MDN The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

Syntax

@keyframes <keyframes-name> { <qualified-rule-list> }

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting @keyframes
Chrome	43
Edge	12
Firefox	16
Safari	9
Chrome Android	43
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Syntax

Definition

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Browser support