Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
135
rated 0 times [  138] [ 3]  / answers: 1 / hits: 82518  / 12 Years ago, wed, february 6, 2013, 12:00:00

I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.



The question is: which css property is the most suitable for this?



.passive1{
display:none
}

.passive2{
visibility:hidden;
}

.passive3{
opacity:0;
}


And how can I measure rendering performance like fps, gpu usage?


More From » css

 Answers
7

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).



To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.


[#80387] Tuesday, February 5, 2013, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;