可以为元素添加淡入淡出动画使元素闪烁吗？答案

【问题标题】：Can adding a fade in animation to an element make the element flicker?可以为元素添加淡入淡出动画使元素闪烁吗？
【发布时间】：2021-05-27 10:16:17
【问题描述】：

假设我的主标题在用户访问我的页面时淡入

h1 {
  animation: fadeInLeft 500ms ease backwards;
}


@keyframes fadeInLeft {

  from {
    opacity:0;
    transform:translateX(-10%);
  }
  
  to {
    opacity:1;
    transform:translateX(0);
  }
}

&lt;h1&gt;Heading&lt;/h1&gt;

现在我很好奇如果我们想象用户的互联网连接不好会发生什么。如果浏览器下载样式表和应用第一个关键帧的速度很慢，用户会立即看到标题吗？如果是这样，有什么办法可以解决这个问题？

【问题讨论】：

如果是这样，有什么办法可以解决这个问题？ --> 你在你的网站上添加一个加载器
褪色是您网站体验不可或缺的一部分，您需要担心吗？如果他们的互联网连接速度很慢，他们也可能会看到一个没有样式的页面。
可能感兴趣，如何避免 FOUC：primative.net/blog/…

标签： html css

【解决方案1】：

DOM 的呈现方式有一个顺序，您可以在此处查看：Which is the load, rendering and execution order of elements in a HTML page?

CSS文件是解析HTML文件后下载的，理论上是这样。但是，CSS 文件只下载一次，它们存储在本地计算机上，直到从服务器下载一些新的更改。所以如果真的是这样，那只会发生一次。

【讨论】：