CSS3 animation-name 属性

animation-name 属性用于指定一个或多个动画名称，这些动画名称定义了应用于元素的一个或多个动画序列。在 CSS 中，动画序列由 @keyframes 规则定义，并通过 animation-name 属性应用到元素上。

语法

.element {
  animation-name: animation1, animation2, animation3;
}

• animation1, animation2, animation3 等为动画名称，使用逗号分隔多个动画名称。如果指定多个动画名称，它们将按照指定的顺序依次应用到元素上。

值

• <custom-ident>：指定一个动画名称。该名称必须与 @keyframes 规则中定义的动画名称相匹配。
• none：默认值，表示不应用任何动画序列。

示例

// www.javascriptcn.com code example
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

在上面的示例中，定义了一个名为 slide-in 的动画序列，元素 .element 应用了这个动画序列，并实现了一个从左侧滑入的动画效果。

注意事项

• 如果指定的动画名称在 @keyframes 规则中未定义，浏览器将忽略该动画名称。
• 多个动画名称之间的顺序很重要，它们将按照指定的顺序依次应用到元素上。
• 可以使用 animation-fill-mode 属性来控制动画序列在播放前和播放后的状态。

以上就是关于 CSS 属性 animation-name 的详细介绍。在实际开发中，合理运用动画名称可以帮助我们实现更加丰富多彩的动画效果。