CSS Animation For Beginners Issue

Language Help CSS
1

I’m having an issue with one of the Front End Engineer articles and I was wondering if the same issue occurs for anyone else? Here’s a link to article that I’m talking about:

CSS Animation For Beginners Article

The second practice question on the page doesn’t seem to accept the right answer - even if the View Solution button is pressed, filling in the correct code. Here is what I have for my code (and the solution that fills when the View Solution button is pressed):

.x-axis {
  /* add animation below */
  animation: rightLeft 2s;
}

.y-axis {
  /* add animation below */
  animation: upDown 1s;
}

When I hit Check Answer, this message is displayed " In the x-axis ruleset, did you add rightLeft as the first value of the animation property?"

In case it ends up being important, I’m on macOS v 11.2.3 using Firefox v 86.0

1 Like
2

Having the same issue on PC using Firefox as well.

3

It looks like the animation short-hand doesn’t have solid native support in Firefox.

Instead, you have to use animation-name and then assign the other properties. Considering Firefox’s small share of the market (just below that of Safari), this may not be an issue. For the purposes of passing the section, it just may.