CSS animation-name 属性为定义元素动画的@keyframes提供名称。这些规则以逗号分隔的序列形式列出，用于描述动画行为。
语法
animation-name: keyframename|none|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| keyframes | 这指定了要应用于选择器的关键帧的名称 |
| none | 这指定不会有任何动画，并且是默认值。 |
| initial | 这会将属性设置为其初始值。 |
| inherit | 这将继承父元素的属性。 |
CSS animation-name 属性示例
下面列出的示例将说明具有不同值的 animation-name 属性。
带有关键帧的动画名称
在示例中，已经创建了一个描述动画的关键帧，名称为 slide，它与 .box 类链接，该类使用这些规则来制作盒子的动画。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
.box {
width: 100px;
height: 100px;
background-color: teal;
animation-name: slide;
/* Assigning the animation name */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<h2>CSS Animation Name Property</h2>
<div class="box"></div>
</body>
</html>
none 的动画名称
当动画名称设置为 none 时，不会发生任何动画。在此示例中，动画名称已设置为 none，因此该框是静态的。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: teal;
animation-name: none;
/* Assigning the animation name */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<h2>CSS Animation Name Property</h2>
<div class="box"></div>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
