css 动画在加载时使用外部样式表播放答案

【问题标题】：css animation plays with external style sheet on loadcss 动画在加载时使用外部样式表播放
【发布时间】：2017-03-04 10:22:43
【问题描述】：

我有一个包含转换的外部样式表。当页面加载过渡动画时。

当我从外部样式表移动过渡并将它们放在我的 html 文件的标题中时，动画不会在页面加载时进行动画处理（这是我想要的）。

当放置在外部样式表中时，我可以做些什么来阻止过渡动画？

这里是一些 CSS 示例：

label {
    font-size: 18px;
    transition: all 0.2s ease-in-out;
}

当这是在 css 文件中时，字体会从页面大小变为 css 文件大小。

当它位于 <style> 标记的标头中时，它不会做任何事情。

【问题讨论】：

可以分享一下网页吗？
它在我的本地机器上没有页面。
我认为它与 css 定义的确切位置有关（在您的 HTML 中 - 在任何其他 css 定义之前或之后，它们是在 CSS 文件中还是在 <style> 标签中并不重要)
@Dekel 写一个答案，不要使用 cmets。
@Soviut，如果不查看完整代码，任何答案都只是一个疯狂的猜测......如果问题会有更多代码/示例，它会更容易提供帮助。

标签： html css

【解决方案1】：

这是因为样式表是同步加载的，而外部表是异步加载的。当它们同步加载时，不会触发转换，因为 DOM 只需绘制一次；没有什么可以过渡的。同时，从外部加载样式表需要几毫秒的时间，因此需要在加载后重新绘制 DOM。

在这种情况下，您应该使用动画，而不是过渡。无论如何，动画都会在开始时运行。

@keyframes slide-in {
  from {
    opacity: 0;
    width: 0%;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}

.animate-me {
  background: red;
  height: 100px;
  color: white;
  
  animation: slide-in 1s ease-in-out;
}

&lt;div class="animate-me"&gt;animate me on load&lt;/div&gt;

如果您确实需要过渡，则需要一些 javascript 在至少一帧延迟后应用类。

setTimeout(function() {
    // apply class to elements
}, 0);

【讨论】：

我能够让它工作......看起来我必须将父元素设置为display: inline-block，我猜它在某种程度上影响了它。看起来它与外部样式表无关。