Can adding a fade in animation to an element make the element flicker?

Question

Say I have this main heading fade in just as a user visits my page

h1 {
  animation: fadeInLeft 500ms ease backwards;
}


@keyframes fadeInLeft {

  from {
    opacity:0;
    transform:translateX(-10%);
  }
  
  to {
    opacity:1;
    transform:translateX(0);
  }
}

<h1>Heading</h1>

Now I am curious what would happen if we imagined that the user was on a bad internet connection. Could it happen that the user would see the heading immediately if the browser was slow to download the stylesheet and apply the first keyframe? If so, is there any way to counteract this?

*If so, is there any way to counteract this?* --> you add a loader to your website — Temani Afif, May 27 '21 at 10:17
Is the fade in such an integral part of your website experience that you need to worry about it? If they have a slow internet connection, they'd also possibly see an unstyled page. — AKX, May 27 '21 at 10:18
probably of interest, how to avoid FOUC: https://www.primative.net/blog/how-to-get-rid-of-the-flash-of-unstyled-content/ — vals, May 27 '21 at 12:42

score 0 · Answer 1 · answered May 27 '21 at 10:28

There is an order how DOM is rendering and you can check it out here: Which is the load, rendering and execution order of elements in a HTML page?

CSS files are downloaded after parsing HTML file, so theoretically it is a case. However, CSS files are downloaded only once and they are stored on local machine until there will be some new changes to download from server. So if it would be really the case, it would happen only once.

Can adding a fade in animation to an element make the element flicker?

1 Answers1