1

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

For example: I have the following css to rotate the globe on the page before loading the data and UI.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to { 
    -webkit-transform: rotate(0deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to { 
    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 is set display:none then the globe angle keep changing if I again show it.

If it is keep rotating the globe even it is hidden then it is eating CPU cycles which is not desired.

I want to know, Does the css animation calculation still goes on or not?

Thank you.

Amitesh
  • 2,917
  • 2
  • 19
  • 14

1 Answers1

1

Yes ... Brother Amitesh .... the answer is ... your transition is still processing in background ... which does effect the performance but I think it is not a big issue in modern devices .

You can get more information about it on : How do you detect when CSS animations start and end with JavaScript?

Hope this will help you ... wish you a great day..

Community
  • 1
  • 1
Mahabub Islam Prio
  • 1,075
  • 11
  • 25
  • Thank you @code.prio. +1 for the link which leads to [Using CSS animations - Using animation events](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations#Using_animation_events) – Amitesh May 13 '15 at 12:56