Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedad CSS animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un @keyframes esta regla define los valores de las propiedades de la secuencia de animación.

A menudo es conveniente utilizar la propiedad abrevieda animation para ajustar todas las propiedades de animación a la vez.

Valor inicialnone
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Sintaxis formal: [ none | <keyframes-name> ]#

where
<keyframes-name> = <custom-ident> | <string>

animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

animation-name: initial;
animation-name: inherit;
animation-name: unset;

Valores

<single-animation-name> es una de las siguientes palabras clave:

none
Es una palabra clave especial que denota que no hay fotogramas (keyframes) clave. Se puede utilizar para desactivar una animación sin cambiar el orden de los otros identificadores, o para desactivar animaciones procedentes de las cascada.
<custom-ident>
Cadena que identifica la animación. Este identificador está compuesto por una combinación de letras mayúsculas y minúsculas de la "A"a la "Z", números del 0 al 9, guiones bajos "_" y/o guiones "-". el primer caracter siempre debe ser una letra, ni un numero, excepto un guión (no se pueden poner dos guiones seguidos o más al principio del nombre.) No puede usarse noneunsetinitial, o inherit ni ninguna combinación de estos casos.

Ejemplos

Ver ejemplos CSS animations.

Especificaciones

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

Compatibilidad en 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ísticas 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.10 #
4.0-webkit
Características Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 ? ?

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: teoli, Sebastianz, maiky
Última actualización por: teoli,