【问题标题】:Css keyframes fade-inCss 关键帧淡入
【发布时间】:2021-12-30 15:44:21
【问题描述】:

我希望在网站页面加载时影响帖子,例如淡入,但是加载时看到的帖子,其余帖子是固定的并且没有效果,在这种情况下有人可以帮助我。
我使用 css 来实现这个效果。

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

【问题讨论】:

  • 请同时包含相关的 HTML。
  • Lorem ipsum 是图形、印刷和出版行业中常用的占位符文本,用于预览布局和视觉模型。

标签: javascript html css css-animations


【解决方案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 方法。
猜你喜欢
相关资源
最近更新 更多
热门标签