I was wondering if images with opacity 0 are getting rendered by your phone/ webbrowser. I have an app that creates lots of images rapidly and when I use transition and set my opacity at 0.5 it laggs and when I use opacity 0 it doesn't lagg. So i'm assuming that the images with opacity 0 aren't rendered at all.
javascript code:
function transitionImage(trans, x, y) { //trans is an image
image.style.transition = "transform 1000ms ease-in, opacity 500ms ease-in 500ms";
image.style.transform="translate("+x+"px, "+y+"px)";
image.style.opacity="0"; //or 0.5
}
Do I need to remove my image with opacity 0 after the transition or isn't it necessary?
Update
See Callback when CSS3 transition finishes for a complete answer
Modern web browsers use the GPU to render parts of web pages, especially ones with animation. I would presume your theory is correct as your GPU would have nothing to render when opacity is set to 0.
I think a better approach to this would be to rather set display:none;
on the property when it's not displayed instead of opacity:0
.