animation-name 属性用于指定一个或多个动画名称，这些动画名称定义了应用于元素的一个或多个动画序列。在 CSS 中，动画序列由 @keyframes 规则定义，并通过 animation-name 属性应用到元素上。
语法
.element { animation-name: animation1, animation2, animation3; }
animation1,animation2,animation3等为动画名称，使用逗号分隔多个动画名称。如果指定多个动画名称，它们将按照指定的顺序依次应用到元素上。
值
<custom-ident>：指定一个动画名称。该名称必须与@keyframes规则中定义的动画名称相匹配。none：默认值，表示不应用任何动画序列。
示例
-- -------------------- ---- ------- ---------- -------- - ---- - ---------- ------------------ - -- - ---------- -------------- - - -------- - --------------- --------- ------------------- --- -------------------------- --------- -展开代码
在上面的示例中，定义了一个名为 slide-in 的动画序列，元素 .element 应用了这个动画序列，并实现了一个从左侧滑入的动画效果。
注意事项
- 如果指定的动画名称在
@keyframes规则中未定义，浏览器将忽略该动画名称。 - 多个动画名称之间的顺序很重要，它们将按照指定的顺序依次应用到元素上。
- 可以使用
animation-fill-mode属性来控制动画序列在播放前和播放后的状态。
以上就是关于 CSS 属性 animation-name 的详细介绍。在实际开发中，合理运用动画名称可以帮助我们实现更加丰富多彩的动画效果。
