CSS 动画示例

在这个页面，我们将展示一些基本的 CSS 动画效果。CSS 动画可以让网页元素以平滑和有趣的方式变化，增加用户体验。

基本动画

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

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

.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: slide-left 5s infinite;
}

@keyframes slide-left {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

动画类型

CSS 提供了多种动画类型，包括：

• linear: 动画以恒定的速度执行。
• ease: 动画开始和结束时速度较慢，中间速度较快。
• ease-in: 动画开始时速度较慢。
• ease-out: 动画结束时速度较慢。
• ease-in-out: 动画开始和结束时速度较慢，中间速度较快。

更多资源

想要了解更多关于 CSS 动画的知识，可以查看我们的 CSS 动画教程。

<center><img src="https://cloud-image.ullrai.com/q/css_animation_example/" alt="CSS Animation Example"/></center>