Propiedad animation-name de CSS

La propiedad animation-name especifica uno o más nombres de animaciones definidos por la regla @keyframes que se deben aplicar al elemento seleccionado. Cuando se especifican varios valores separados por comas para cualquier propiedad de animación, se asociarán a las animaciones definidas en animation-name de manera diferente.

La propiedad animation-name es una de las propiedades de CSS3.

La propiedad abreviada animation se puede usar para establecer todas las propiedades de animación a la vez. Diferentes propiedades de animación pueden controlar la animación. Pueden especificar el tiempo de iteración de la animación, si la animación debe estar reproduciéndose o en pausa y si alterna entre los valores. También se puede retrasar el tiempo de inicio de la animación.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a los pseudo-elementos ::before y ::after.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.animationName = "element";

Sintaxis

Sintaxis de la propiedad animation-name de CSS

css

animation-name: keyframename | none | initial | inherit;

Ejemplo de la propiedad animation-name:

Ejemplo de la propiedad animation-name de CSS

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s 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>

Try it Yourself »

INFO

En el ejemplo dado, el nombre de la animación se establece en "element". Puedes elegir cualquier nombre que desees.

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.

Práctica

¿Qué hace la propiedad CSS animation-name?

Define el nombre de la animación @keyframes.Cambia el color de un elemento.Define la velocidad de la animación.Vincula la animación al elemento.Redimensiona el elemento según el tamaño de la pantalla.

Propiedad animation-name de CSS ​

Sintaxis ​

Ejemplo de la propiedad animation-name: ​

Valores ​

Práctica ​

Propiedad animation-name de CSS

Sintaxis

Ejemplo de la propiedad animation-name:

Valores

Práctica