title: Element with opacity: 0 in CSS is not initially zero on page load
body: <p>I want to set an element's opacity to 0 in CSS. But turns out, it's not actually 0 initially. If I set transition for opacity, it shows that the element is fully opaque first and slowly fades away. This is my CSS:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-overlay {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="index.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="nav-overlay"&gt;
       &lt;h1&gt;Test&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is it normal ? If I put the CSS class inside the <code>&lt;style&gt;</code> tag in my HTML, the element's opacity is 0 immediately. Why different behavior between putting the class in separate CSS file vs directly in HTML inside <code>&lt;style&gt;</code> tag ?</p>