animation-name

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Experimental: 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
Valor calculadocomo se especifica
Animation typeNot animatable

Sintaxis

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

<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 none, unset, initial, o inherit ni ninguna combinación de estos casos.

Ejemplos

Ver ejemplos CSS animations.

Especificaciones

Specification
CSS Animations Level 1
# animation-name

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-name
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver también