Css transition animation visible on load

Question

I have a css animated element. You can see the effect in the demo by clicking the checkbox.

In the demo the css is probably put inline so the issue is not shown in the demo. It only shows if the css is loaded from a css file.

Element visible on load (which it should not be)

What happends to me is that the red sidebar becomes visible for a short time before it animates away on load.

How can I get around it?

(I don't want any javascript in this case)

* {
  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>

you need to load the CSS as soon as possible to avoid FOUC: https://petrey.co/2017/05/the-most-effective-way-to-avoid-the-fouc/ — Temani Afif, Jan 22 '20 at 18:59

score 0 · Answer 1 · answered Jan 22 '20 at 20:19

0

Try to load your css file before page rendering using rel="preload"

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

answered Jan 22 '20 at 20:19

Levente Gabos

350
1
5

I'm surpriced but that did not work in Chrome, latest. – Jens Törnell Jan 23 '20 at 19:55
ok then try to add inline-style:
adasdsaas
and then set margin-left: 0 with 'important' on 'input:checked' to overwrite the inline-style. 'input:checked ~ div { margin-left: 0 !important; } } – Levente Gabos Jan 24 '20 at 08:34
That is kind of what I ended up doing, thanks! I created a – Jens Törnell Jan 24 '20 at 11:51

Css transition animation visible on load

Element visible on load (which it should not be)

1 Answers1

Linked