60 FPS Animations with CSS3

Re:60 FPS Animations with CSS3 by luke3butler on Monday July 10, 2017 @12:34PM (#14737452)

TL;DR

These are the best css properties to animate with

Position — transform: translateX(n) translateY(n) translateZ(n);

Scale — transform: scale(n);

Rotation — transform: rotate(ndeg);

Opacity — opacity: n;

I'll add in that translate3d is generally faster than the other translate options. There's some good performance info in the post and it's worth the short read.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by westoncb on Monday July 10, 2017 @12:55PM (#14737632)

They also point out that substantial performance gains are given by using 'will-change,' as in the following.

  .app-menu {
	-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
	transition: transform 300ms linear;
	will-change: transform;

}

And I'd point out that the authors are specifically stating that animating transform+opacity (via a 'transition') are more efficient than things like left, top, bottom, etc.—because those properties affect the layout stage, which is earlier than the composite stage (where the transform+opacity properties operate), and subsequent stages have to be recalculated.

They also discuss different ways of structuring DOM trees to create the same animation which have performance trade-offs.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by luke3butler on Monday July 10, 2017 @12:57PM (#14737651)

Yep, the will-change was something new to me.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by ash_gti on Monday July 10, 2017 @01:32PM (#14737999)

This appears to be browser specific.

I copied his code-pen and used his first example in Safari (just using the `left` css property) and it was still 60 FPS in Safari (per debugging tools). I wonder how much variance there is between browsers on this. (I'm on a Mac 10.12.5 using Safari 10.1.1 (12603.2.4))

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by luke3butler on Monday July 10, 2017 @01:37PM (#14738036)

There are a lot of jsperf tests like this one https://jsperf.com/translate3d-vs-xy/4

This isn't pure css as it's using JS to set the property, but it should be a good indicator.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by ash_gti on Monday July 10, 2017 @01:46PM (#14738116)

I'm not an expert in this area, but doesn't setting these properties only take effect in the next layout/paint cycle?

I think you need to call getComputedStyle (https://developer.mozilla.org/en-US/docs/Web/API/Window/getC...) to resolve the new style update outside of the layout/paint cycle.

But I'm not really sure to be honest

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by iainmerrick on Monday July 10, 2017 @02:00PM (#14738227)

All CSS advice around "this causes the creation of a compositing layer" is browser-specific. Chrome and Safari happen to have a particular compositing model but AFAIK there's nothing in the HTML spec that actually requires it.

[ Parent | on HN ]