animation-name

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年9月⁩.

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 #333;
  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

/* 单个动画 */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* 多个动画 */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/* 全局值 */
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。

备注：当你在 animation-* 属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 animation-name 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

形式定义

初始值	`none`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
计算值	as specified
动画类型	Not animatable

形式语法

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);
  }
}