CSS transition won't start on blur screen

Question

I'm using react js. I try to run the simple code:

setTimeout(() => {
       setTimeout(() => {
         const element = document.getElementById(‘circle’)
         element.style.backgroundColor = ‘red’
       }, 3000)
     }, 3000)

The CSS of 'circle' is just:

width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
transition: background-color 2s;

I run the code and immediate change tab or minimize the screen, waiting more then 6 seconds and go back to the page and then the transition start. For some reason the transition not run if screen not in focus. Any help guys???

Answer 1

The behavior you describe depending on the browser because inactive tabs have low priority execution .

While you performing a "JS Animation" you may want to use requestAnimation .

A better approach may use a "CSS Animation" with transition-delay .

Answer 2

Use this code why are using Apostrophe mark in code.

    <script>
        setTimeout(() => {
               setTimeout(() => {
                 const element = document.getElementById('circle')
                 element.style.backgroundColor = 'red'
               }, 3000)
             }, 3000)
        </script>

Answer 3

Actually it is not really help me. The solution i made is to listen to 'focus' and 'blur' and stop any animations process and timers on blur and continue from last point at focus.