animation-name 是CSS动画属性之一,用于指定应用于元素的动画的名称。这个属性的值通常是一个用@keyframes定义的关键帧动画的名称。

语法:
animation-name: none | <keyframes-name> | <custom-ident> | <custom-ident>+;

  •  none:没有动画效果。默认值。

  •  <keyframes-name>:指定一个由 @keyframes 定义的关键帧动画的名称。

  •  <custom-ident>:自定义标识符,可以用于实现一些特殊的动画效果。


示例:
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation-name: slide-in;
  animation-duration: 2s;
}

在这个例子中,@keyframes slide-in 定义了一个简单的从左侧滑入的动画。然后,.element 类应用了这个动画,通过 animation-name: slide-in; 指定了使用名为 slide-in 的关键帧动画。

您还可以使用逗号分隔多个动画名称,这样多个动画将依次应用于元素。这在需要同时运行多个动画时非常有用。
.element {
  animation-name: slide-in, fade-in;
  animation-duration: 2s;
}


转载请注明出处:http://www.zyzy.cn/article/detail/4103/CSS