So I'm building large size site, which uses css3 transitions for animations (I'm using jaquery.transit to manipulate element transitions and their css styles). And I stumbled upon 2 problems:
Questions:
div
rotating and scaling and translating in x,y axis at same time, with approx. 5-20 elements displayed on that div's
surface? The main issue at the time was that all of the PNG's on the screen had to recalculated and recompiled in the browser.
There were several things I had to do to to maximize performance:
width
and height
attributes on images. What this does is let's the browser know what size the picture should be and when used together with scale()
it won't recalculate and recompile those images. These things were very expensive. So basically if nothing else than scale()
modified image size, everything was perfect and animations were awesome.visibility
property, it literally acts like opacity: 0
keeping the element in the layout making layout recalculation much longer. Always where possible use display: none
, this will completely eliminate element from the layout calculations. This was a major pitfall, because I had to re-think the UI to exclude visibility
and I had to minimize used DOM node count.Overall it was a huge adventure and big experience, hope this question/answer helps someone.