CSS 盒子动画是一种很有趣的技术，它可以让网页中的元素产生各种各样的动态效果。在接下来的文章中，我们将介绍如何使用 CSS 来创建一个简单的盒子动画。
首先，我们需要在 HTML 页面中创建一个 div 元素，它将用作我们的盒子。在 div 中添加一个 class 属性，为其指定一个名称，比如 “box”。
```
<p><div class="box"></div></p>
接下来，我们需要在 CSS 样式表中编写一些代码来为盒子添加动画效果。我们将使用关键帧（@keyframes）规则来定义动画效果的开始和结束状态。
```
<p>@keyframes example {
</p> <p>0% {
</p> <p>transform: translateX(0);
</p> <p>
}
</p> <p>100% {
</p> <p>transform: translateX(200px);
</p> <p>
}
</p> <p>
}
</p> <p>.box {
</p> <p>width: 100px;
</p> <p>height: 100px;
</p> <p>background-color: red;
</p> <p>animation-name: example;
</p> <p>animation-duration: 2s;
</p> <p>animation-iteration-count: infinite;
</p> <p>
}
</p> 在上面的代码中，我们定义了一个名为 “example” 的关键帧，它的起始状态为盒子的原始位置（translateX(0)），结束状态为盒子向右平移 200 像素（translateX(200px)）。
我们还为盒子添加了一些基本的 CSS 样式，例如宽度、高度和背景颜色。然后，我们为它添加了动画相关的属性，例如动画名称（animation-name）、动画持续时间（animation-duration）和动画重复次数（animation-iteration-count）。
最后，我们可以预览这个盒子动画效果。在浏览器中打开你的 HTML 文件，你会看到一个红色的盒子不断地从左到右平移，直到达到指定的位置。
