CSS3 animation-name 属性
CSS3 animation-name 属性
CSS3 animation-name 属性用于定义一个由 @keyframes 规则指定的动画，让动画效果在指定的元素上执行。这个属性指定动画的名称。
语法
animation-name: none | 动画名称;
参数
| 参数 | 描述 |
|---|---|
| none | 没有动画效果 |
| 动画名称 | 指定一个动画名称 |
属性值
动画名称指的是由 @keyframes 规则定义的动画名称。例如，以下代码定义了动画名称为 myfirst：
@keyframes myfirst {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
然后，我们可以将该动画名称应用到某个元素上，如下所示：
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
这里将动画名称为 myfirst 应用到 div 元素上。
注意事项
当 animation-name 属性指定为 none 时，将关闭动画效果。此时，其他相关的动画属性值也将失效，比如 animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction 等。