html5 - If any element is hidden then still the css3 animation's calculations happen in background? -

is css3 animation calculation keep going on in background if element hidden (display:none).

for example: have following css rotate globe on page before loading data , ui.

@-webkit-keyframes rotate {   {     -webkit-transform: rotate(360deg);   }   {      -webkit-transform: rotate(0deg);   } } @keyframes rotate {   {     transform: rotate(360deg);   }   {      transform: rotate(0deg);   } }  .rotating-globe{     background-image:url(../images/globe.png);     -webkit-animation: rotate 20s linear infinite 0s;     animation: rotate 20s linear infinite 0s; } 

i observe when globe set display:none globe angle keep changing if again show it.

if keep rotating globe hidden eating cpu cycles not desired.

i want know, css animation calculation still goes on or not?

thank you.

yes ... brother amitesh .... answer ... transition still processing in background ... effect performance think not big issue in modern devices .

you can more information on : how detect when css animations start , end javascript?

hope ... wish great day..