CSS 关键帧动画在一个选择器上工作，但在其他选择器上不工作

Question

我在我的 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 都不起作用，即使它们的格式完全相同。不知道我错过了什么，有什么帮助吗？

Answer 1

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