CSS animation-name

Defines a comma-separated list of animations to apply to the given selector.

Syntax

animation-name: <value>;

Copy to clipboard
Copy to clipboard

where <value> is a @keyframes rule, which contains the properties that will be animated.

div {
  animation-name: fade;
}

@keyframes fade {
  /* properties: values; */
}

Copy to clipboard
Copy to clipboard

Example 1

Give the animation-name a value of disappear:

div {
  height: 200px;
  width: 200px;
  background-color: blue;
  animation-duration: 2s;
  animation-name: disappear;
}

@keyframes disappear {
  from {
    background-color: blue;
  }
  to {
    background-color: white;
  }
}

Copy to clipboard
Copy to clipboard

Example 2

Give the animation-name a second comma-separated value slideleft:

div {
  height: 200px;
  width: 200px;
  background-color: blue;
  animation-duration: 4s, 5000ms;
  animation-name: fadeoutfadein, slideleft;
}

@keyframes fadeoutfadein {
  0% {
    background-color: blue;
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: blue;
  }
}

@keyframes slideleft {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

Copy to clipboard
Copy to clipboard