css - Animations

CSS 动画（CSS Animations）是一种使用 CSS 属性来实现元素动态变化的技术。它允许您在不使用 JavaScript 或 Flash 等技术的情况下，通过使用 CSS 属性来创建动态效果。

CSS 动画由两个主要组成部分组成：关键帧（Keyframes）和动画属性（Animation Properties）。

关键帧是指定义了动画在不同时间点上应该显示的样式。例如，您可以定义一个在动画开始时显示元素，然后在 50% 处旋转元素，最后在动画结束时将其变形的关键帧。

动画属性用于指定动画如何进行，包括动画持续时间、延迟、动画速度和重复次数等。通过指定这些属性，您可以控制动画的时序和执行方式。

下面是一个简单的 CSS 动画示例，该示例将使元素在 2 秒内从左侧滑动到右侧：

/* 定义动画关键帧 */
@keyframes slide {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}

/* 应用动画属性 */
.element {
  animation-name: slide;
  animation-duration: 2s;
}

在这个例子中，我们首先定义了一个名为 slide 的关键帧，该关键帧定义了元素的初始样式（from）和结束样式（to）。然后，我们将 slide 动画应用于一个类名为 .element 的元素，通过设置 animation-name 和 animation-duration 属性来指定动画名称和持续时间。

CSS 动画有许多属性可以用于自定义动画效果，包括动画延迟、动画速度、动画方向、动画填充模式等。通过熟练使用这些属性，您可以创建出非常丰富的动画效果，从简单的平移和旋转到复杂的路径动画和变形效果。