在 CSS 中创建动画名称

简介

CSS 动画可以让网页更加生动有趣，通过 CSS 属性定义动画的效果和持续时间，我们可以为网页添加各种各样的动画。

在 CSS 中创建动画名称是一个非常方便的技巧，可以让你在定义和控制动画时更加灵活，避免需要在多个地方重复定义动画效果的情况。接下来，我们会介绍如何在 CSS 中创建动画名称。

如何在 CSS 中创建动画名称

在 CSS 中创建动画名称需要使用 @keyframes 规则。@keyframes 规则允许你定义一个动画序列，包含在指定的关键帧位置上的 CSS 样式。

下面是一个简单的例子，展示如何使用 @keyframes 规则创建一个名为 my-animation 的动画：

@keyframes my-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0);
  }
}

在这个例子中，我们定义了一个名为 my-animation 的动画，该动画包含了三个关键帧，分别为 0%、50% 和 100%。在这三个关键帧的位置上，我们设置了不同的 transform 属性，用以实现沿 Y 轴上的平移动画。

定义完动画序列后，我们可以在其他地方使用 animation-name 属性来引用这个动画名称。

.box {
  animation-name: my-animation;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

在这个例子中，我们为 .box 元素定义了一个 my-animation 的动画名称，并设置了动画的持续时间、缓动函数和执行次数。

总结

在 CSS 中创建动画名称是一个非常方便且实用的技巧，可以让我们在定义和控制动画时更加灵活和方便。使用 @keyframes 规则，我们可以轻松地创建动画序列，并在其他地方使用动画名称来引用这个序列。