Why does simple animation cause a very long update layer tree?

Paste this code on any site with a heavy interface (twitter for example) and run a performance test:

For incomprehensible reasons to me, the “update layer tree” takes several ms on the core i7 4770k:
example on twitter.com

And if you insert the same code on an empty page, then everything works very quickly. Why is this happening and how to fix it?

Why doesn’t this animation appear in DevTools Animations tab?

I am attempting to work out how Invision’s blog animation works. Specifically the zoom and shading on the title image pictured below when scrolling.

I would have thought this would be a CSS animation, but it doesn’t appear in Chrome DevTools ‘Animations’ tab.

enter image description here

How does this animation work, and why doesn’t it appear in the ‘Animations’ tab?