"Applied Visual Design: Modify Fill Mode of an Animation"

Hello Guys!

I got stuck in this challenge. Once that I tried many ways as the hint the video. I am asking for help , please! :sweat_smile:

button:hover {
  animation-name: background-color;
  animation-duration: 500ms;
  /* Only change code below this line */
  animation-fill-mode: fowards; 
  /* Only change code above this line */
}

Many thanks!!!

C.B.

<style>
button {
  border-radius: 5px;
  color: white;
  background-color: #0F5897;
  padding: 5px 10px 8px 10px;
}
button:hover {
  animation-name: background-color;
  animation-duration: 500ms;
  /* Only change code below this line */
  animation-fill-mode: fowards; 
  /* Only change code above this line */
}
@keyframes background-color {
  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/72.0.3626.121 Safari/537.36.

Challenge: Modify Fill Mode of an Animation

Link to the challenge:

Does your test fail?

Hi Marjunior2510!

Indeed! This is why I am asking here in this forum. The challenge was all about this part:

“animation-fill-mode: fowards;”

Oh ok no problem, this following code of mine passes:

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    /* Only change code below this line */
  animation-fill-mode: forwards;
    /* Only change code above this line */
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>Register</button>

Try that, if there is anything you don’t understand please feel free to mention me.

1 Like

Hi Marjunior2510!

This test bellow is mine. Is exactly like yours. But still nothing.

button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px; } button:hover { animation-name: background-color; animation-duration: 500ms; /* Only change code below this line */ animation-fill-mode: fowards; /* Only change code above this line */ } @keyframes background-color { 100% { background-color: #4791d0; } }

Register

Is it possible if you could send a screenshot?

1 Like

It is forwards not fowards

@marc.eh Please do not post solutions. I have blurred your code.

2 Likes

@cverana @marc.eh

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Hi Marjunior2510!

Many thanks! It was spelling mistake!

C.B.

1 Like

Hi lasjorg!

Many thanks for you advice!

C.B.

1 Like