CSS animation-name 属性

CSS animation-name 语法

在 CSS 中，animation-name 属性用于实现动画调用的是哪一个动画的名称，即使用 @keyframes 定义的动画名称。

语法：

animation-name: 动画名;

说明：

animation-name 取值可以是一个或多个值。

animation-name 调用的动画名需要和 @keyframes 规则定义的动画名完全一致（严格区分大小写），如果不一致将不会产生任何动画效果。

提示: animation-name 属性适用于所有元素，包括伪元素（比如 ::before 和 ::after）。

CSS animation-name 摘要

属于	CSS 动画
使用频率	高
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS animation-name 示例

接下来，我们通过几个简单的例子来讲解一下 animation-name 属性是如何使用的。

示例 1：animation-name 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @keyframes mycolor {
            0% { background-color: red; }
            30% { background-color: blue; }
            60% { background-color: yellow; }
            100% { background-color: green; }
        }
        @keyframes mytransform {
            0% { border-radius: 0; }
            50% { 
                border-radius: 50px; 
                transform: translateX(0); 
            }
            100% { 
                border-radius: 50px; 
                transform: translateX(50px); 
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:hover {
            animation-name: mytransform;
            animation-duration: 2s;
            animation-timing-function: linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

animation-name 示例

分析：

在这个例子中，我们使用 @keyframes 规则定义了两个动画：mycolor 和 mytransform。不过由于 animation-name 属性调用的是名为 “mytransform” 的动画。因此只有名为 “mytransform” 的动画会生效，而名为 “mycolor” 的动画则不会生效。

animation-name: mytransform;
animation-duration: 2s;
animation-timing-function: linear;

上面代码可以简写为以下一句代码，在实际开发中我们也是采用这种简写形式。

animation: mytransform 5s linear;

小伙伴们自行测试一下下面两种方式，然后跟上面例子比较一下有何不同？考验大家观察能力的时候到了。

/* 方式1 */
@keyframes mytransform {
    0% { border-radius: 0; }
    50% { 
        border-radius: 50px; 
        transform:translateX(0); 
    }
    100% { transform:translateX(50px); }
}

/* 方式2 */
@keyframes mytransform {
    0% { border-radius: 0; }
    50% { border-radius: 50px; }
    100% { transform: translateX(50px); }
}

初学的小伙伴可能还会有一个疑问：“每次我们都是定义鼠标移到元素上时（:hover），动画才会开始。如果想要在打开页面就能自动执行动画，那该怎么实现呢？”

其实很简单，我们只需要把调用动画的代码放在 div 元素，而不是在 :hover 伪类中，就能实现了，请看下面的例子。

示例 2：在 div 中调用动画

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @keyframes mycolor {
            0% { background-color: red; }
            30% { background-color: blue; }
            60% { background-color: yellow; }
            100% { background-color: green; }
        }
        @keyframes mytransform {
            0% { border-radius: 0;}
            50% { 
                border-radius: 50px;
                transform: translateX(0);
            }
            100% {
                border-radius: 50px;
                transform: translateX(50px);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: mytransform;
            animation-duration: 2s;
            animation-timing-function: linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

在div中调用动画

分析：

在这个例子中，当我们打开页面，动画就会自行执行了。此外，animation 属性的几个子属性跟 transition 属性的几个子属性是非常相似的，小伙伴们可以对比一下，这样更难加深理解和记忆。

animation 是一个复合属性

在 CSS 中，animation 是一个复合属性，它包含以下子属性（如下表所示）。

animation 的子属性
子属性	说明
animation-name	定义要应用的动画名称
animation-duration	定义动画的持续时间
animation-timing-function	定义动画的速度曲线
animation-delay	定义动画的延迟时间
animation-iteration-count	定义动画的重复次数
animation-direction	定义动画的方向
animation-play-state	定义动画的播放状态（运行或暂停）
animation-fill-mode	定义动画在播放之前和之后如何应用样式到元素