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

Попробуйте загрузить файл css перед отображением страницы, используя rel = "preload"

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