# 通过创建企鹅学习 CSS 变换 - 步骤 96

**URL:** <https://forum.freecodecamp.org/t/css-96/708081>\
**Category:** General\
**Tags:** chinese-中文\
**Created:** [August 26, 2024, 8:25am UTC](https://forum.freecodecamp.org/t/css-96/708081 "2024-08-26T08:25:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![David23](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@David23](https://forum.freecodecamp.org/u/David23)\
**Post date:** [August 26, 2024, 8:25am UTC](https://forum.freecodecamp.org/t/css-96/708081/1 "2024-08-26T08:25:01Z")

</div>

### 告诉我们发生了什么：

我需要在关键帧中设置4个关键点，我不知道该怎么去设置，没有明白题目的意思，导致我的办法不能通过，我需要帮助

### 到目前为止你的代码

```html
<!-- file: index.html -->

```

```css
/* file: styles.css */
/* User Editable Region */

@keyframes wave {
  0% {
    transform: translate(0 15px);
    opacity: 1;
  }
  10% {
    transform: translate(-10px 25px);
    opacity: 0.8;
  }
  20% {
    transform: translate(0 15px);
    opacity: 0.6;
  }
  30% {
    transform: translate(-10px 56px);
    opacity: 0.4;
  }
  40% {
    transform: translate(0 15px);
    opacity: 0.99;
  }
}

/* User Editable Region */

```

### 你的浏览器信息：

用户代理是： `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0`

### 挑战信息：

通过创建企鹅学习 CSS 变换 - 步骤 96

> **[freeCodeCamp.org](https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-96)**
>
> 免费学习编程

---

<div class="post-metadata">

**Author:** ![Teller](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teller/32/412338_2.png) [@Teller](https://forum.freecodecamp.org/u/Teller)\
**Post date:** [August 26, 2024, 8:44am UTC](https://forum.freecodecamp.org/t/css-96/708081/2 "2024-08-26T08:44:19Z")

</div>

欢迎来到论坛 @David23

说明要求您包含四个“wave”航路点。

您包含了五个“wave”航路点。

请删除“0% 波”航路点。

此外，说明没有要求包含航路点的属性。

快乐编码

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:48pm UTC](https://forum.freecodecamp.org/t/css-96/708081/3 "2025-01-08T15:48:35Z")

</div>

Closed on January 8, 2025, 3:48pm UTC