CSS Animation

Complex method of animating certain properties of an element

CSS @scroll-timeline

CSS property that allows animations to be driven by a container's scroll position

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-reverse`

css property: animation-direction: `reverse`

css property: animation-duration

css property: animation-duration: `auto` value

css property: animation-fill-mode

css property: animation-iteration-count

css property: animation-name

css property: animation-play-state

css property: animation-range

css property: animation-range-end

css property: animation-range-start

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: clip-path: animations

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