animation

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 inicialas each of the properties of the shorthand:
Applies toall elements
Heredableno
Valor calculadoas each of the properties of the shorthand:
Animation typeNot 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.

Sobre Accesibilidad

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. (en-US)

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

Consulte también