animation-name

christian.dinh's avatar
christian.dinh's avatar
christian.dinh
Published Jul 1, 2021Updated Oct 4, 2023
Contribute to Docs

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

Syntax

animation-name: <value>;

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

div {
  animation-name: fade;
}


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

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;
  }
}

Example 1

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%;
  }
}

Example 2

All contributors

Contribute to Docs

Learn CSS on Codecademy