# Keyframes or Waypoints

**URL:** <https://group.classcentral.com/t/keyframes-or-waypoints/24412>\
**Category:** Web Development Bootcamp\
**Created:** [February 14, 2022, 8:29pm UTC](https://group.classcentral.com/t/keyframes-or-waypoints/24412 "2022-02-14T20:29:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sunshine](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@Sunshine](https://group.classcentral.com/u/Sunshine)\
**Post date:** [February 14, 2022, 8:29pm UTC](https://group.classcentral.com/t/keyframes-or-waypoints/24412/1 "2022-02-14T20:29:38Z")

</div>

Keyframes are confusing.  
In the building Penguin challenge on Step 96, we are asked:

Give @keyframes wave four waypoints starting at 10%, and incrementing by 10%.

What should I do?

---

<div class="post-metadata">

**Author:** ![Jacobra\_the\_Great](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/jacobra_the_great/32/3612_2.png) [@Jacobra\_the\_Great](https://group.classcentral.com/u/Jacobra_the_Great)\
**Post date:** [February 15, 2022, 1:38am UTC](https://group.classcentral.com/t/keyframes-or-waypoints/24412/2 "2022-02-15T01:38:37Z")

</div>

That one was tricky for me too, especially because there are no “waypoints” in CSS (at least, none I could find).

It turns out you just list the percentages, separated by commas. Ignore the term “waypoints” as a CSS rule, since it’s not one.

If you need more clarification, let me know! I’m always happy to help. 🙂

---

<div class="post-metadata">

**Author:** ![Sunshine](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@Sunshine](https://group.classcentral.com/u/Sunshine)\
**Post date:** [February 15, 2022, 11:45am UTC](https://group.classcentral.com/t/keyframes-or-waypoints/24412/3 "2022-02-15T11:45:27Z")

</div>

Many thanks, Jacob. I’ve passed the step, and it was tricky indeed.

Thanks for your offer of future clarifications, I’ll post more questions soon. 🌞

---

<div class="post-metadata">

**Author:** ![andriussiupin2675846](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/andriussiupin2675846/32/4903_2.png) [@andriussiupin2675846](https://group.classcentral.com/u/andriussiupin2675846)\
**Post date:** [March 5, 2022, 3:23pm UTC](https://group.classcentral.com/t/keyframes-or-waypoints/24412/4 "2022-03-05T15:23:11Z")

</div>

@keyframes wave {

10%{}

20% {}

30% {}

40% {}  
}

Try this!