Applied visual design @keyframes and animation

1

For some reason, in FCC beta, the animation in the @keyframes-challenge doesn’t work.
I’ll appreciate another opinion before reporting a bug :slightly_smiling_face:
If it matters, I run ubuntu 16.04, Chrome Version 59.0.3071.115 (Official Build) (64-bit)

2

Just tried in chromium and the tests pass. Maybe you can post your code?

3

My code passes, but the animation itself doesn’t work …
for instance in the challenge “Use CSS Animation to Change the Hover State of a Button”, even though the code passes, nothing happens when I hover the button

4

Hmmm… I have animations here. I’m using Chromium 59.0.3071.115 (Developer Build) on Manjaro.

Haven’t tried the Use CSS Animation to Change the Hover State of a Button challenge yet. EDIT: I also see animations in said challenge.

Maybe you should submit an issue in github.

5

ok, I found the bug - and it’s not about the animation itself, but the code validation!
Accidently I put the @keyframes inside the CSS button:hover definition, when it should be outside of it

<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>
6

Yet the tests pass? It’s a bug then…

EDIT. It’s a known issue.

1 Like