CSS 动画参考

CSS 动画允许您在网页上创建动态效果，使页面更加生动。以下是一些常见的 CSS 动画属性和示例。

常用 CSS 动画属性

• animation-name: 定义要应用的动作名称。
• animation-duration: 定义动作完成所需的时间。
• animation-timing-function: 定义动画的速度曲线。
• animation-delay: 定义动画在开始之前等待的时间。
• animation-iteration-count: 定义动画的播放次数。
• animation-direction: 定义动画的播放方向。

示例

以下是一个简单的 CSS 动画示例，它会使一个元素在页面中上下移动。

@keyframes moveUpAndDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

.animated-element {
  animation-name: moveUpAndDown;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<div class="animated-element">这是一个动画元素</div>

动画效果示例

扩展阅读

如果您想了解更多关于 CSS 动画的知识，可以阅读以下链接：

• MDN Web Docs - CSS Animations

希望这些信息能帮助您更好地理解和使用 CSS 动画！