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 animadas está disponible; cabe señalar que estas son las mismas propiedades soportadas por CSS transitions.

Valor inicialas each of the properties of the shorthand:
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

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.

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

Especificaciones

Especificación Estado Comentario
CSS Animations
La definición de 'animation' en esta especificación.
Working Draft  

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.5 #
4.0-webkit
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? 5.0 (5.0)-moz
16.0 (16.0)
? ? iOS 2.0-webkit

Consulte también

Etiquetas y colaboradores del documento

Colaboradores en esta página: evaferreira, teoli, Luis_Calvo, jesanchez, ccarruitero
Última actualización por: evaferreira,