CSS - animation-name 属性

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

打印页面