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 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
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete

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 Level 1
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! (en-US)

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

Consulte también