Css 关键帧淡入答案

【解决方案1】：

您必须在要与之关联的 div 上指定 animation-name。此外，带有opacity 的动画在设置animation-duration 时效果最佳。 div 不必与动画同名，只要在任意 div 中指定动画名称即可。请参阅下面我所做的 CSS 更改。

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

div {
  animation-name: fade-in;
  animation-duration: 5s;
}

<div class="fade-in"><p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </p></div>

<div><p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </p></div>

【讨论】：

我之前测试过animation-duration，但是页面加载的时候，效果的第一个post被执行了，但是当你向下滚动时，什么都没有发生。
@s-mostafa-d 请参阅 here 了解使动画在滚动时开始的 JavaScript 方法。