animation-name
animation-name CSS 属性指定一个或多个 @keyframes at-rule 的名称，这些 at-rule 描述了要应用于元素的动画。多个 @keyframes at-rule 以逗号分隔的名称列表形式指定。如果指定的名称与任何 @keyframes at-rule 不匹配，则不会有属性被动画化。
试一试
animation-name: none;
animation-name: slide;
animation-name: bounce;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
</section>
#example-element {
animation-direction: alternate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5px solid #333333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
@keyframes bounce {
from {
background-color: orange;
color: black;
margin-top: 0;
}
to {
background-color: orange;
color: black;
margin-top: 40%;
}
}
通常，为了图方便，可以使用简写属性 animation 一次性设置所有动画属性。
语法
css
/* No animation */
animation-name: none;
/* Single animation */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";
/* Multiple animations */
animation-name: test1, animation4;
animation-name:
none,
-moz-specific,
sliding;
/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;
值
none-
一个特殊的关键字，表示没有关键帧。它可以用于停用动画，而无需更改其他标识符的顺序，或者停用来自层叠的动画。
<custom-ident>-
一个未加引号的名称，用于标识动画。此标识符由大小写敏感的字母
a到z、数字0到9、下划线 (_) 和/或破折号 (-) 的组合组成。第一个非破折号字符必须是字母。此外，标识符开头禁止出现两个破折号。此外，标识符不能是none、unset、initial或inherit。 <string>-
一系列字符，遵循与上述自定义标识符相同的规则，只是它们被双引号 (") 或单引号 (') 包裹。如果
animation-name和对应的@keyframesat-rule 名称都使用带引号的字符串，则none、全局关键字以及以下划线或双破折号开头的名称都是有效的，但不推荐。
注意：当您在 animation-* 属性上指定多个逗号分隔的值时，它们将按照 animation-names 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参阅设置多个动画属性值。
正式定义
正式语法
animation-name =
[ none | <keyframes-name> ]#
<keyframes-name> =
<custom-ident> |
<string>
示例
命名动画
此动画的 animation-name 为 rotate。
HTML
html
<div class="box"></div>
CSS
css
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
结果
将鼠标悬停在矩形上以启动动画。
有关示例，请参阅 CSS 动画。
规范
| 规范 |
|---|
| CSS 动画级别 1 # animation-name |
浏览器兼容性
加载中…