Step 96 - Keyframes wavepoint

HTML-CSS
1

Hi fcc support,

Step 96 in the Building a Penguin asks for this:
Learn CSS Transforms by Building a Penguin: Step 96 | freeCodeCamp.org

The code that I am working with is:

@keyframes wave {

10% {top: 0px};
20% {top: 200px};
30% {top: 100px};
40% {top: 200px};

}

My keyframe at 10% passed because the hint called out the wavepoint at the 20% keyframe. What would an example of the proper syntax look like for a keyframes wave at 20%, 30%, 40% or in a 10% increasing sequence?

1 Like
2

You have given extra ;
They are not required here, that is why your code is not working.

3 Likes
3

Thanks for your assistance. The code works and the project passed.

4

Can you please tell me the correct code?

5

please can you explain further? am stuck here !!!

6

Hi Augustine,
What the fcc help team member was referring to is the usage of the semicolon after each property: value pair that you would declare under
@keyframes wave{
property: value
}

7

Not sure if anyone got back with you. But if you are using the semicolon or comma after each property - value pair in step 96 does this still register as an error in your code?

8

I was stuck too for a bit, but reading the instructions carefully;

; 'Give wave four waypoints starting at 10%, and incrementing by 10%. ’

It doesn’t mention anything about its values just to create the waypoints, so the proper syntax should look like this;

Mod edit: removed solution

Hope it helps!

9

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like