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

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

当我从外部样式表中移动转换并将它们放置在html文件的标题中时，动画在页面加载时不会动画（这是我想要的）

当放置在外部样式表中时，我可以做些什么来停止变换的动画制作

以下是一些css示例：

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

当它位于

css

文件中时，字体从页面大小变为css文件大小

---

当它位于

标记的标题中时，它不会做任何事情。

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

在这种情况下，应该使用动画，而不是过渡。无论发生什么情况，动画都将在开始时运行

@关键帧滑入{
从{
不透明度：0；
宽度：0%；
}
到{
不透明度：1；
宽度：100%；
}
}
.让我充满活力{
背景：红色；
高度：100px；
颜色：白色；
动画：滑入1秒，轻松入出；
}

---

在加载时为我制作动画

你能分享这个网页吗？它在我的本地机器上，没有页面。我认为它与css定义的确切位置有关（在你的HTML中-在任何其他css定义之前或之后，它们是否在css文件或

标记中并不重要）@Dekel写一个答案，不要使用注释。@Soviut，如果不看完整的代码，任何答案都只是猜测而已。。。如果这个问题有更多的代码/示例，它将更容易帮助。我能够让它工作。。。看起来我必须将父元素设置为

display:inline block

，我想这可能是某种原因影响了它。看起来它与外部样式表无关。