CSS | animation-name 属性

CSS 中的 animation-name 属性用于指定动画效果的名称。当您定义了一个动画效果时，使用 animation-name 属性可以将其应用到 HTML 元素上。

语法

div {
  animation-name: animation1 | animation2 | none | initial | inherit;
}

• animation1 | animation2: 指定要应用的动画效果。可以定义多个动画效果，用逗号分隔。
• none: 不应用任何动画效果。
• initial: 将该属性重置为它的默认值。
• inherit: 从父元素继承该属性。

示例

在 CSS 中定义一个简单的动画效果：

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div {
  animation-name: example;
  animation-duration: 3s;
}

在上面的示例中，我们定义了一个名为 "example" 的动画效果，该效果将使元素从完全透明（opacity: 0）变为完全不透明（opacity: 1）。然后，我们将该动画效果应用到 DIV 元素中，并设置其持续时间为 3 秒。

如果要应用多个动画效果：

@keyframes example {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes example2 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

div {
  animation-name: example, example2;
  animation-duration: 3s, 5s;
}

在上面的示例中，我们定义了两个动画效果 "example" 和 "example2"，并将它们应用于 DIV 元素中。"example" 动画效果持续时间为 3 秒，"example2" 动画效果持续时间为 5 秒。

结论

通过使用 CSS 动画，可以为 HTML 元素添加动态效果，增强用户体验。animation-name 属性是一个非常有用的属性，它允许我们将定义好的动画效果应用到一个或多个 HTML 元素上。