animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Resumen

La propiedad animation de CSS es una propiedad abreviada (shorthand property) para animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count y animation-direction.

La lista de propiedades CSS que pueden ser animadasestá disponible; cabe señalar que estas son las mismas propiedades soportadas por CSS transitions.

Valor inicial	as each of the properties of the shorthand: `animation-name`: `none` `animation-duration`: `0s` `animation-timing-function`: `ease` `animation-delay`: `0s` `animation-iteration-count`: `1` `animation-direction`: `normal` `animation-fill-mode`: `none` `animation-play-state`: `running` `animation-timeline`: `auto`
Applies to	all elements
Heredable	no
Valor calculado	as each of the properties of the shorthand: `animation-name`: como se especifica `animation-duration`: como se especifica `animation-timing-function`: como se especifica `animation-delay`: como se especifica `animation-direction`: como se especifica `animation-iteration-count`: como se especifica `animation-fill-mode`: como se especifica `animation-play-state`: como se especifica `animation-timeline`: a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
Animation type	Not animatable

Sintaxis

Formal grammar:  [ <'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
                    <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ]
                  [, [<'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
                      <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'>] ]*

Ejemplos

Consulte CSS animations para ver los ejemplos.

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query.

Para más información (en inglés):

Especificaciones

Specification
CSS Animations Level 1 # animation

Compatibilidad con navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.