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


<style>
  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;
    }
  }
  
</style>
  
<button>Register</button>

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:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button

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