CSS Problem with Transition sometimes happening on page load

TL;DR: Sometimes my alertboxes animation happens on first page load because of my transition property in the CSS I’m guessing. Hard to reproduce issue.


Trying to isolate on codepen and experiments transition vs animate

Screen cap of issue

Recreate by using the app: Paste a URL, use copy button and paste in browser address and go to page, let it load. Then hit browser back button. Seems to recreate it consistently in chrome at least.

I’m working on my short URL project and it has some css transitions happening on events.

I have some issues where the transition is sometimes happening on the initial page load.

The inputs were resizing but I believe I fixed this by changing my transition CSS to specify only the property I wanted a transition on.

 transition: background-color 1000ms linear;

That seemed to fix the transition from applying to the padding.

Another element also had this issue, some alert boxes that start out at 0 opacity.

opacity: 0;
transition: opacity 1000ms;

On an event I use JS to add this class which overwrites those properties

.reveal {
  opacity: 1;
  transition: 100ms;

After 1000ms the class is removed. My goal is to have a fade in out effect with a quick fade in and slow fade out.

It works as expected but sometimes when the page is first loaded I see the alert boxes that should start at 0 opacity but they seem start at 1 then fade out.

This is hard to reproduce consistently. New tab, load page, happens sometimes. New tab, arbitrary search , then paste in url, happens sometimes. Leave page, hit back button, sometimes happens.

Can’t figure out how to reproduce the behavior consistently.

I’ve come across a few things that are either hacky or not sure if it actually applies.

https://css-tricks.com/transitions-only-after-page-load/ Seems to be the same problem I’m having but hacky.

Also read about it maybe having to do with <form> on pages. Seen another hack about having an empty <script> </script> with a single space.

I have been fiddling on codepen with transition and animate to achieve the effect and to see if I can reproduce the issue in codepen but I am unable to.

I think going with CSS animations will solve my issue since there will be no initial transition property on the css but I want to know if anyone has some insights on this issue / what is going on, or can figure out how to consistently reproduce the unwanted behavior and why it only happens sometimes.

Can you see if this makes a difference:

Take the transition out of the alert class (but leave the opacity: 0 ) and make another class called hide containing the transition that you apply when you remove reveal.

I think the issue is that you have the transition firing on page load, but most of the time its finished before the page loads, but not every time.

1 Like

Thank you. This works works as well as another approach of using an animate class w/ @keyframes instead of transition.

Really appreciate you taking the time to check it out!