Learn CSS Transforms by Building a Penguin - Step 96

HTML-CSS
1

Tell us what’s happening: I am trying to create the wave point in Css animation which is giving me this hot seat.

This is what i wrote so far on the code:

@keyframes wave {
top: 10%;
top:10%;
bottom: 10%;
bottom: 10%;
}

===========

@keyframes wave {
  top: 10%;
  top:10%;
  bottom: 10%;
  bottom: 10%;
}

Your browser information:

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

Challenge Information:

Learn CSS Transforms by Building a Penguin - Step 96

2

For this step you should create four waypoints, starting at 10% and incrementing by 10% for each of the following waypoints.

The syntax should look something like this:

@keyframes wave {
  value { 
    //rule here 
  }

  value { 
    // rule here
  }

  ... etc ...
}

Note that you are not specifying any animation rules yet, just creating empty waypoints at those values. You can leave the sets of curly brackets empty for now.

Here’s more info:

1 Like
3

Yea thank you so much i really appreciate the clue brought it back to my head and i got it real quick

1 Like
4 
code removed by moderator