加载时可见的 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" />