CSS 属性animation-name 标识定义元素动画的@keyframes 规则。这些规则以逗号分隔的序列列出，描述了动画行为。如果指定的名称不符合任何 @keyframes 规则，则不会对任何属性进行动画处理。
简写属性 animation 证明实用，因为它可以同时配置所有与动画相关的属性。
属性值
CSS 属性animation-name 可以具有以下值之一:
none: 指示缺少关键帧的特定术语。它用于禁用动画而不更改其他标识符的顺序，或禁用从级联继承的动画。
<custom-ident>: 此标识符使用组合来命名动画由 a 到 z 的大写和小写字母、0 到 9 的数字、下划线 (_) 和/或连字符 (-) 组成。第一个字符（连字符除外）必须是字母。
此外，标识符不能以两个连字符开头，并且某些关键字（如 none、unset、initial 或inherit）不能用作标识符。
注意:当在animation-*属性上指定多个逗号分隔值时，这些值将按照动画名称出现的顺序应用于动画。
语法
animation-name = [ none | <keyframes-name> ]#
<keyframes-name> = <custom-ident> | <string> 适用范围
所有 HTML 元素，::before 和 ::after 伪元素。
CSS animation-name: 指定名称
在示例中，animation-name: slip;表示 @keyframeslide{...} 中定义的动画序列，用于 .box 元素。
此属性创建一个链接，允许元素访问和应用使用translateX 变换水平移动框的命名动画。
通过此链接，动画名称属性允许目标元素执行指定的动画序列。
<html>
<head>
<style>
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(300px); }
}
.box {
width: 100px;
height: 100px;
background-color: teal;
animation-name: slide; /* 指定动画名称 */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>