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