新！我的 44 页电子书“CSS 在 44 分钟内”已发布！ 😃

立即获取 →

#animation-name

定义哪个动画关键帧要使用。

默认 animation-name: none;

如果没有指定动画名称，则不会播放任何动画。

animation-name: fadeIn;

如果指定了名称，则将使用与该名称匹配的关键帧。

例如，fadeIn 动画如下所示

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation-name: moveRight;

另一个示例：moveRight 动画

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}