60 FPS Animations with CSS3

Sarcasm doesn't carry well on the internet, if that was your intention (not all of us know everything about everything). Please refrain, specially on this board.

Re: 60 FPS Animations with CSS3

#5

Post by luke3butler » Mon, Jul 10, 2017, 4:34 PM UTC

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.

Re: 60 FPS Animations with CSS3

#6

Post by rootedbox » Mon, Jul 10, 2017, 4:40 PM UTC

xyzxyz998 wrote: post #4

distantsounds wrote: post #3

"but the human eye can only see 30fps!"

Sarcasm doesn't carry well on the internet, if that was your intention (not all of us know everything about everything). Please refrain, specially on this board.

I can't actually tell if you are being sarcastic.. As he actually has a point. If you're spending your time getting to make your hamburger work past 30 fps; then you may need to rethink priorities.

Re: 60 FPS Animations with CSS3

#7

Post by distantsounds » Mon, Jul 10, 2017, 4:45 PM UTC

xyzxyz998 wrote: post #4

distantsounds wrote: post #3

"but the human eye can only see 30fps!"

Sarcasm doesn't carry well on the internet, if that was your intention (not all of us know everything about everything). Please refrain, specially on this board.

It was sarcasm, and no.

Re: 60 FPS Animations with CSS3

#8

Post by whowouldathunk » Mon, Jul 10, 2017, 4:50 PM UTC

amelius wrote: post #2

I hope browser vendors take note and make this guide obsolete.

This guide will be relevant until OS compositors fundamentally change from just dealing with bitmaps. Which is unlikely to happen anytime soon.

And doing UI layout on background threads breaks the basic design of pretty much every UI framework, web or native, which are usually single-threaded.

Re: 60 FPS Animations with CSS3

#9

Post by CharlesW » Mon, Jul 10, 2017, 4:54 PM UTC

rootedbox wrote: post #6

xyzxyz998 wrote: post #4

Earlier quoted context omitted.

Sarcasm doesn't carry well on the internet, if that was your intention (not all of us know everything about everything). Please refrain, specially on this board.

I can't actually tell if you are being sarcastic.. As he actually has a point. If you're spending your time getting to make your hamburger work past 30 fps; then you may need to rethink priorities.

> As he actually has a point.

The sensitivity of the human eye goes way beyond 30fps. Studies have shown that viewers can distinguish between modulated light and a stable field at up to 500 Hz. As a more practical example, many reviewers have noted that the new iPads' 120 Hz refresh rate has obvious, visible benefits for scrolling and animations.

Re: 60 FPS Animations with CSS3

#10

Post by westoncb » Mon, Jul 10, 2017, 4:55 PM UTC

luke3butler wrote: post #5

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.

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.