调用动画animation-name属性如何用？animation-name属性详细说明1

[摘要]本篇文章给大家带来的内容是关于调用动画animation-name属性怎么用？animation-name属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。animation-...

本篇文章给大家带来的内容是关于调用动画animation-name属性怎么用？animation-name属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

animation-name属性:

在CSS3中，使用@keyframes规则定义的动画并不会自动执行，我们还需要使用animation-name属性来调用动画，之后动画才会生效。

语法：

animation-name：动画名；

说明：

注意，animation-name 调用的动画名需要和@keyframes规则定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。为了浏览器兼容性，针对Chrome和Safari浏览器需要加上-webkit-前缀，而针对Firefox浏览器需要加上-moz-。

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-name属性</title>
    <style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        @-webkit-keyframes mytransform
        {
            0%{border-radius:0;}
            50%{border-radius:50px; -webkit-transform:translateX(0);}
            100%{border-radius:50px; -webkit-transform:translateX(50px);}
        }
        div
        {
            width:100px;
            height:100px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这里我使用@keyframes规则定义了2个动画：mycolor和mytransform。但是我们只使用animation-name调用动画名为mytransform的动画。因此，名为mytransform的动画就会生效，而名为mycolor的动画不会生效。

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