Naming @keyframes

Tell us what’s happening:
I got the solution correct but I’m a bit confused regarding the naming protocol of keyframes.
Is the @keyframes [name] required to be the same as the animation-name for it to function correctly? Or can it be named anything, similar like setting a class name or id.

Your code so far

  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
  @keyframes background-color {
    100% {
      background-color: #4791d0;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:

It can be named anything you want.

Just make sure name of your keyframes matches your animation-name.

1 Like

The keyframes are the literal frames of an animation. If you give the keyframes that should relate to a specific animation a different name, then there is nothing linking the two things, so it won’t work. If you want do animate: pulse; you need some keyframes that actually describe that animation and you have to identify them by @keyframes pulse, CSS ain’t magic

Slight thing I noticed: probably avoid giving animations the same as actual CSS properties, they will still work but it will also be confusing as hell

1 Like