Can't solve first activity

HTML-CSS
1

Tell us what’s happening:

The @keyframes rule should use the animation-name background-color.

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 animation-name{
100%{
background-color: #4791d0;
}
}

</style>

<button>Register</button>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Use CSS Animation to Change the Hover State of a Button

Link to the challenge:

2

solved!!
Sorry my mistake

1 Like
3

You are on the right track right there on your @keyframes But if you want to ues your animation, you have to use the name of the animation. Ex:

@keyframes animation_name {
0% {color: black}
100% {color: yellow}
}

element {
  animation-name: animation_name; /* You have to use the animation
name which is declared after the @keyframes*/
  animation-duration: 5s;
}

/* OR you can use one line code like this */
element {
  animation: animation_name 5s;
}

/* It uses this inline template */
animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;

You can learn more about CSS animations here:

2 Likes