在CSS3中，我们可以使用@keyframes规则来定义动画调用的是哪一个动画名称，即@keyframes定义的哪一个规则。

语法：

animation-name: 动画名;

说明：

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

举例：animation-name

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @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:5s;
            animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

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

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

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

animation: mytransform 5s linear;

此外，在mytransform动画中，在0%至50%之间，div元素的border-radius属性值从0变为50px，然后在50%至100%之间保持50px不变，并且水平向右移动50px。

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

方式一：

@keyframes mytransform
{
    0%{border-radius:0;}
    50%{border-radius:50px; transform:translateX(0);}
    100%{-webkit-transform:translateX(50px);}
}

方式二：

@keyframes mytransform
{
    0%{border-radius:0;}
    50%{border-radius:50px;}
    100%{transform:translateX(50px);}
}

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

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

举例：在div中调用动画

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @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:5s;
            animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，当我们打开页面，动画就会自行执行了。此外，animation属性的几个子属性跟transition属性的几个子属性是非常相似的，在接下来章节学习中，我们经常对比一下，可以更好地理解和记忆。