New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#animation-name

Defines which animation keyframes to use.

default animation-name: none;

If no animation name is specified, no animation is played.

animation-name: fadeIn;

If a name is specified, the keyframes matching that name will be used.

For example, the fadeIn animation looks like this:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation-name: moveRight;

Another example: the moveRight animation:

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}