如何在CodePen上创建一个简单的动画效果？请用Markdown格式给出包含创建步骤和代码示例的回答，代码块请使用HTML和CSS。
user
要在CodePen上创建一个简单的动画效果，可以按照以下步骤操作，并结合提供的HTML和CSS代码示例来实现动画效果：

### 步骤 1: 创建新的CodePen项目
1. 访问CodePen网站（https://codepen.io/）。
2. 点击右上角的 "Login" 登录您的账户，如果没有账户，请先注册。
3. 登录后，点击右上角的 "Create Pen" 按钮来创建一个新的项目。

### 步骤 2: 编写HTML代码
在HTML编辑区域中，添加如下代码来创建一个简单的动画元素：

```html
<div class="animated-box"></div>
```

### 步骤 3: 编写CSS代码
在CSS编辑区域中，添加如下代码来设置动画效果：

```css
.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  animation: slide 5s forwards;
}

@keyframes slide {
  from { left: 0; }
  to { left: calc(100% - 100px); }
}
```

### 步骤 4: 预览效果
完成HTML和CSS代码的编写后，可以立即在CodePen的预览区域中查看效果。您将会看到一个蓝色的方块从左边移动到右边。

### 步骤 5: 保存并分享
1. 如果满意动画效果，可以点击 "Save" 按钮保存项目。
2. 保存后，在项目页面顶部，点击 "Share" 可以获取项目链接或者嵌入代码。

通过以上步骤，您就可以轻松在CodePen上创建并分享一个简单的自定义动画效果了。祝您创作愉快！
assistant