CSS 关键帧动画适用于一个选择器而不适用于其他选择器

如何解决CSS 关键帧动画适用于一个选择器而不适用于其他选择器

我在我的 CSS 文件中定义了以下简单的关键帧动画，即使第一个工作正常，我也无法让后两个工作：

.hi p {
  font-family: 'Prompt',sans-serif;
  font-size: 20rem;
  color: #f7c089;
  font-weight: bold;
  animation: hiAnimation 1.5s ease-in;
}

@keyframes hiAnimation {
  from {
    opacity: 0;
    margin-left: -2rem;
  }

  to {
    opacity: 1;
    margin-left: 0rem;
  }
}

.intro-name {
  font-family: 'Prompt',sans-serif;
  font-size: 4rem;
  color: #bababa;
  font-weight: 400;
  animation: nameAnimation 1.5s ease-in;
}

@keyframes nameAnimation {
  from {
    opacity: 0;
    margin-top: -2rem;
  }

  to {
    opacity: 1;
    margin-top: 0rem;
  }
}

.intro-title {
  font-family: 'Prompt',sans-serif;
  font-size: 4rem;
  line-height: 70px;
  color: #d6d6d6;
  font-weight: 400;
  animation: titleAnimation 1.5s ease-in;
}

@keyframes titleAnimation {
  from {
    opacity: 0;
    margin-bottom: -2rem;
  }

  to {
    opacity: 1;
    margin-bottom: 0rem;
  }
}

hiAnimation 工作得很好 - 完全按照预期制作动画 - 但 nameAnimation 或 titleAnimation 都不起作用，即使它们的格式完全相同。不确定我错过了什么，有什么帮助吗？

解决方法

你会减少 font-size: 20rem 吗？到 2rem 因为它应该可以工作。 您设置的时间非常短，这就是为什么当您滚动查看已经完成的动画时。 让我知道它对你有用。