Propiedad CSS animation-name
Usa la propiedad animation-name para especificar el nombre de animaciones definidas con @keyframes. Prueba el ejemplo de animation-name.
La propiedad animation-name nombra una o más animaciones @keyframes para aplicar a un elemento. El valor es el identificador que le asignaste a una regla @keyframes — el nombre es lo que vincula el elemento con su animación. Sin animation-name, el navegador no tiene fotogramas clave que ejecutar, por lo que nada se anima aunque hayas establecido una duración.
Esta propiedad solo apunta a la animación; no la inicia por sí sola. Aún necesitas un valor distinto de cero en animation-duration para que los fotogramas clave se reproduzcan. animation-name es una de las propiedades CSS3.
En la práctica, rara vez se escribe animation-name de forma manual — la abreviatura animation establece el nombre, la duración, la función de temporización, el retraso, el número de iteraciones, la dirección y más en una sola declaración. Usa la propiedad individual cuando desees sobrescribir solo el nombre (por ejemplo, cambiar los fotogramas clave al pasar el cursor manteniendo el mismo tiempo).
Cuándo usarlo
- Reutilizar un conjunto de fotogramas clave en varios elementos con distintas duraciones o retrasos, estableciendo
animation-nameuna vez y variando las otras propiedades individuales. - Cambiar animaciones según el estado — asigna a un elemento un nombre normalmente y un nombre diferente al hacer
:hovero al alternar una clase. - Ejecutar varias animaciones a la vez en el mismo elemento listando nombres separados por comas (ver Múltiples animaciones más abajo).
Reglas de nomenclatura
El nombre de los fotogramas clave es un identificador CSS, por lo que se aplican las mismas reglas:
- Es sensible a mayúsculas y minúsculas:
Slideyslideson nombres distintos. - Puede contener letras, dígitos, guiones y guiones bajos, pero no puede comenzar con un dígito.
- Evita las palabras clave globales de CSS
none,initial,inherityunsetcomo nombres de animación —animation-name: nonese interpreta como "sin animación", no como un bloque de fotogramas clave literalmente llamadonone.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a los pseudoelementos ::before y ::after. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.animationName = "element"; |
Sintaxis
Sintaxis de la propiedad CSS animation-name
animation-name: keyframename | none | initial | inherit;Puedes proporcionar más de un nombre, separados por comas, para aplicar varias animaciones al mismo elemento:
animation-name: slide, fade;Ejemplo de la propiedad animation-name
Ejemplo de la propiedad CSS animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation-name: element;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>En el ejemplo dado, el nombre de la animación se establece como "element". Puedes elegir cualquier nombre que desees, siempre que exista una regla @keyframes element coincidente. Si el nombre no tiene ninguna regla @keyframes coincidente, la declaración simplemente se ignora y nada se anima.
Múltiples animaciones
Cuando listas varios nombres, cada uno se asigna posicionalmente a los valores de las demás propiedades individuales de animación. Aquí slide obtiene 2s/ease-out y fade obtiene 4s/linear:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
padding: 20px;
background: #1c87c9;
color: #fff;
animation-name: slide, fade;
animation-duration: 2s, 4s;
animation-timing-function: ease-out, linear;
animation-iteration-count: infinite;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(150px); }
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0.2; }
}
</style>
</head>
<body>
<div>Sliding and fading at the same time.</div>
</body>
</html>Si proporcionas menos valores para otra propiedad de los que hay nombres, los valores se repiten para cubrir cada nombre. Para un control más preciso del resto de la animación, consulta animation-delay y animation-direction.
Valores
| Valor | Descripción |
|---|---|
| none | Este es el valor predeterminado. Especifica que no habrá animación. |
| keyframename | Especifica el nombre de la animación. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |