Css过渡动画在加载时可见

Question

我有一个css动画元素。您可以通过单击复选框在演示中看到效果。

在演示中，css 可能是内联的，因此问题不会显示在演示中。它仅显示 css 是否从 css 文件加载。

元素在加载时可见(不应该(

发生在我身上的是，红色侧边栏在加载时动画消失之前会在短时间内变得可见。

我怎样才能绕过它？

(在这种情况下，我不想要任何javascript(

* {
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 100px;
background: red;
position: fixed;
display: block;

margin-left: -100%;
transition: margin 200ms ease-in;
}
input:checked ~ div {
margin-left: 0;
}
}

<input id="hello" type="checkbox">
<div>
adasdsaas
</div>

Answer 1

尝试在页面渲染之前使用 rel="preload" 加载您的 css 文件

<link href="css/main.css" rel="preload" type="text/css" />