Start CSS3 transition after viewing custom pages?

Question

I have a CSS3 animation at the top of my homepage that starts right after the page loads. The problem is that the user opens this page in a new tab, but does not see it immediately, and the animation will play even if they do not view this page.

Is there a way to get the animation only after the user views this page?

As if you are opening a YouTube video in another hidden tab, it will not automatically play until you open this tab. And also CodePen does the same if you open the pen in a new tab, it does not start until you see this tab

Answer 1

Do you want to use visibility api: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

In particular, you will need the document.hidden property and the visibilitychange event. You can use them to dynamically change your classes when the document.hidden property is false.

Answer 2

As indicated there , you can check when the window is focused, that is, the user clicked (but did not view it). How do you implement it?

You choose id / class / tag, whatever. Style it, with animation as well. When this window is focused, you apply id / class to the element or create a new element with the / id / class tag. After adding the class, you either cancel the onfocus function, or check with the variable created for this purpose.

Example:

 window.onfocus=function(){ window.onfocus=null; document.getElementById("toBeAnimated").className="animatable"; } 

 #toBeAnimated{ font-size:25px; } .animatable{ transition: background-color 250ms linear; background-color:black; transition: color 250ms linear; color:white; } 

 <div id="toBeAnimated">Focus on the snippet to animate me!</div> 

Another option: you can apply this function to the onscroll event, for example, when the user starts scrolling your page.