CSS Animation

Complex method of animating certain properties of an element

getComputedStyle

API to get the current computed CSS styles applied to an element. This may be the current value applied by an animation or as set by a stylesheet.

prefers-reduced-motion media query

CSS media query based on a user preference for preferring reduced motion (animation, etc).

Web Animations API

Lets you create animations that are run in the browser, as well as inspect and manipulate animations created through declarative means like CSS.

CSS will-change property

Method of optimizing animations by informing the browser which elements will change and what properties will change.

cssanimation api

cssanimation api: animationname

css at-rule: `@media`: `-webkit-animation` media feature

css property: animation-composition

css property: animation-delay

css property: animation-direction

css property: animation-direction: alternate

css property: animation-direction: alternate-reverse

css property: animation-direction: normal

css property: animation-direction: reverse

css property: animation-duration

css property: animation-duration: `auto` value

css property: animation-fill-mode

css property: animation-fill-mode: backwards

css property: animation-fill-mode: both

css property: animation-fill-mode: forwards

css property: animation-fill-mode: none

css property: animation-iteration-count

css property: animation-iteration-count: infinite

css property: animation-name

css property: animation-name: none

css property: animation-play-state

css property: animation-play-state: paused

css property: animation-play-state: running

css property: animation-range

css property: animation-range-end

css property: animation-range-end: normal

css property: animation-range-start

css property: animation-range-start: normal

css property: animation-timeline

css property: animation-timeline: `scroll()`

css property: animation-timeline: `view()`

css property: animation-timing-function

css property: animation-timing-function: `jump-` keywords for `steps()`

css property: animation: `animation-timeline` included in shorthand

css property: font-palette: animation of `font-palette` by computed value

css property: grid-template-columns: animation of tracks

css property: grid-template-rows: animation of tracks

css selector: `::after`: animation and transition support

css selector: `::before`: animation and transition support

css selector: `::marker`: animation and transition support

types: `<basic-shape>`: animation