CSS Features

Editor's Draft · animation-triggers

Animation Triggers

15 properties, 11 functions, 1 type defined by this specification, 12 of them known to at least one browser (the others are badged Not in any browser yet).

Modern CSS features in this module: Scroll-triggered animations.

Read the Editor's Draft ↗

Each feature in detail

animation-trigger

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The animation-trigger CSS property specifies whether CSS animations declared on an element are triggered animations (or not) and, if so, what their triggers are and how they should behave when the trigger becomes active or inactive. This is used to create scroll-triggered animations.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear both;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
}

Syntax

[ none | [ <dashed-ident> <animation-action>+ ]+ ]#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

event-trigger

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

none | [ <'event-trigger-name'> <'event-trigger-source'> ]#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Specification ↗

event-trigger-name

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

none | <dashed-ident>#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Specification ↗

event-trigger-source

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

[ none | <event-function>+ [ / <event-function>+ ]? ]#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Specification ↗

timeline-trigger

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger CSS shorthand property defines a scroll-triggered animation trigger on an element.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger: --t view() entry / cover;
}

Syntax

none | [ <'timeline-trigger-name'> <'timeline-trigger-source'> [ <'timeline-trigger-range'> ]? ]#

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
timeline-trigger-name, timeline-trigger-source, timeline-trigger-range

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-activation-range

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-activation-range CSS shorthand property specifies the start and end of a scroll-triggered animation trigger's activation range.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range: entry 50% exit 50%;
}

Syntax

[ <'timeline-trigger-activation-range-start'> <'timeline-trigger-activation-range-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
timeline-trigger-activation-range-start, timeline-trigger-activation-range-end

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-activation-range-end

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-activation-range-end CSS property specifies the end of a scroll-triggered animation trigger's activation range.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range-end: contain 60%;
}

@supports not (timeline-trigger-activation-range-end: contain 60%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-activation-range-end property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Syntax

[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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
relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value
list, each item either the keyword normal or a timeline range and progress percentage
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-activation-range-start

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-activation-range-start CSS property specifies the start of a scroll-triggered animation trigger's activation range.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range-start: entry 50%;
}

@supports not (timeline-trigger-activation-range-start: entry 50%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-activation-range-start property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Syntax

[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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
relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value
list, each item either the keyword normal or a timeline range and progress percentage
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-active-range

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-active-range CSS shorthand property specifies a scroll-triggered animation trigger's active range.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}
.animated.longer {
  left: 150px;
}
section {
  display: flex;
  gap: 20px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}
.animated.longer {
  animation-trigger: --longer-t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range: contain 25% contain 75%;
}
.trigger.longer {
  timeline-trigger-name: --longer-t;
  timeline-trigger-active-range: cover 0% cover 100%;
}

@supports not (timeline-trigger-active-range: contain 0%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-active-range property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Syntax

[ <'timeline-trigger-active-range-start'> <'timeline-trigger-active-range-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
timeline-trigger-active-range-start, timeline-trigger-active-range-end

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-active-range-end

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-active-range-end CSS property specifies the end of a scroll-triggered animation trigger's active range.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}
.animated.longer {
  left: 150px;
}
section {
  display: flex;
  gap: 20px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}
.animated.longer {
  animation-trigger: --longer-t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range-end: contain 50%;
}
.trigger.longer {
  timeline-trigger-name: --longer-t;
  timeline-trigger-active-range-end: cover 100%;
}

@supports not (timeline-trigger-active-range-end: cover 100%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-active-range-end property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Syntax

[ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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
relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value
list, each item either the keyword normal or a timeline range and progress percentage
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-active-range-start

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-active-range-start CSS property specifies the start of a scroll-triggered animation trigger's active range.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}
.animated.longer {
  left: 150px;
}
section {
  display: flex;
  gap: 20px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}
.animated.longer {
  animation-trigger: --longer-t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range: contain 50% contain 100%;
}
.trigger.longer {
  timeline-trigger-name: --longer-t;
  timeline-trigger-active-range-start: contain 0%;
}

@supports not (timeline-trigger-active-range-start: contain 0%) {
  body::before {
    content: "Your browser does not support the timeline-trigger-active-range-start property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Syntax

[ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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
relative to the specified named timeline range if one was specified, else to the entire timeline
Computed value
list, each item either the keyword normal or a timeline range and progress percentage
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-name

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-name CSS property specifies a scroll-triggered animation trigger's identifier(s).

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
}

Syntax

none | <dashed-ident>#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

timeline-trigger-range

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

[ <'timeline-trigger-activation-range'> [ / <'timeline-trigger-active-range'> ]? ]#

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
timeline-trigger-activation-range, timeline-trigger-active-range

Specification ↗

timeline-trigger-source

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The timeline-trigger-source CSS property specifies the timeline that will trigger a scroll-triggered animation.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 3s infinite linear;
  animation-trigger: --t play pause;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
}

Syntax

[ none | auto | [ <dashed-ident> | <scroll()> | <view()> ]+ ]#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

trigger-scope

Property Limited availability Experimental Modern CSS: Scroll-triggered animations

MDN The trigger-scope CSS property can be used to limit the scope of a scroll-triggered animation trigger name to a document subtree.

Live preview Example from MDN 
@keyframes fade-in {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes color-cycle {
  from {
    background: red;
    scale: 1;
  }

  to {
    background: blue;
    scale: 2;
  }
}

@keyframes move-up-down {
  25% {
    translate: 0 -20px;
  }

  75% {
    translate: 0 20px;
  }
}

body {
  width: 60%;
  margin: 0 auto;
  font-size: 1.3rem;
  font-family: "Helvetica", "Arial";
}

p {
  line-height: 1.5;
}

section {
  background: #eeeeee;
  padding: 10px 20px;
  margin-top: 20px;
}

.animated {
  width: 50px;
  height: 50px;
  background: red;
  border: 5px solid black;
}

label {
  position: fixed;
  bottom: 2px;
  right: 2px;
  padding: 5px;
  border: 2px solid black;
  background: white;
}

.animated {
  position: fixed;
  top: 10px;
  animation-trigger: --t play reset;
}

#one .animated {
  animation: fade-in 1s infinite alternate ease-in;
  left: 10px;
}

#two .animated {
  animation: color-cycle 1s infinite alternate linear;
  left: 110px;
}

#three .animated {
  animation: move-up-down 2s infinite linear;
  left: 210px;
}

.trigger {
  timeline-trigger-name: --t;
  timeline-trigger-source: view();
  timeline-trigger-activation-range: contain;

  padding: 10px;
  border: 2px solid black;
  background: black;
  color: white;
}

section {
  trigger-scope: all;
}

:has(:checked) section {
  trigger-scope: none;
}

@supports not (trigger-scope: all) {
  body::before {
    content: "Your browser does not support the trigger-scope property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Syntax

none | all | <dashed-ident>#

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
as specified
Canonical order
per grammar
Animation type
not animatable

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗

change()

Function 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

change()

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

Specification ↗

click()

Function 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

click()

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

Specification ↗

dblclick()

Function 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

dblclick()

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

Specification ↗

focusin()

Function 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

focusin()

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

Specification ↗

focusout()

Function 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

focusout()

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

Specification ↗

input()

Function 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

input()

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

Specification ↗

keypress()

Function 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

/* for <event-function> */
keypress( <string>? )

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

Defined for

<event-function>

This feature only appears in the context of these properties, functions or types.

Specification ↗

pointerdown()

Function 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

pointerdown()

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

Specification ↗

pointerenter()

Function 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

pointerenter()

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

Specification ↗

pointerleave()

Function 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

pointerleave()

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

Specification ↗

pointerup()

Function 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

pointerup()

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

Specification ↗

<animation-action>

Type Limited availability Experimental

Spec The possible <animation-action> values, and what effect they have in each animation state:

MDN The <animation-action> enumerated data type represents keyword values that specify how an animation should behave in certain circumstances — for example, how a triggered animation should behave when its trigger is activated and deactivated.

Live preview Example from MDN 
body {
  width: 80%;
  margin: 0 auto;
  font-family: "Helvetica", "Arial";
  font-size: 1.3rem;
}

div {
  height: 100px;
  border: 5px solid black;
}

.animated {
  width: 100px;
  background: orange;
}

.trigger {
  background: wheat;
}

.animated {
  position: fixed;
  top: 25px;
  left: 25px;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

.animated {
  animation: rotate 1.5s infinite linear both;
  animation-trigger: --t play-forwards play-backwards;
}

.trigger {
  timeline-trigger: --t view() contain;
}

Browser support

Chrome 146
Edge 146
Firefox No
Safari No
Chrome Android 146
Safari iOS No

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

Specification ↗ MDN reference ↗