Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

60 FPS Animations with CSS3

medium.com

Post reply on HN
Print view View original

11–20 of 79 posts

Re: 60 FPS Animations with CSS3

#11

Post by athenot »

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.

There's a difference between the frame rate at which the human eye can process images, and the frame rate at which the human eye can detect that there was a change.

In a 60 fps stream, you can insert one image that is way off from the rest, and it will be detectable. You have to go around 100fps for that "blip" to go unnoticed.

So when it comes to transitions, high frame rates actually do matter, as that makes the difference between something smooth & natural, and something that appears jagged & visually annoying.

Re: 60 FPS Animations with CSS3

#12

Post by andrenotgiant »

My 2015 macbook pro will hit 150% CPU on basic SVG animation via CSS properties (like rotating an SVG element by setting `transform: rotate(90deg);`) even when using the best practices described in the article.

This means long, slow CSS animation absolutely kills browser performance. Independent of your opinions on animation in the browser, is there a less CPU-intensive way to do SVG animation?

Re: 60 FPS Animations with CSS3

#13

Post by luke3butler »

westoncb wrote: post #10
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,…

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

Re: 60 FPS Animations with CSS3

#14

Post by westoncb »

andrenotgiant wrote: post #12

My 2015 macbook pro will hit 150% CPU on basic SVG animation via CSS properties (like rotating an SVG element by setting `transform: rotate(90deg);`) even when using the best practices described in the article. This means long, slow CSS animation absolutely kills browser performance. Independent of your opinions on animation in the browser, is there a less CPU-intensive way to do SVG animation?

From the article

To really get it running smooth and buttery, we’re going to use the GPU to render the animation.

Though translateZ() or translate3d() will still be needed by some browsers as a fallback, the will-change property is the future. What this does is that it promotes the elements to another layer, so the browser doesn’t have to consider the layout render or painting.

Edit: better formatting

Re: 60 FPS Animations with CSS3

#15

Post by westoncb »

whowouldathunk wrote: post #8
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.

Hmm... Wouldn't it be possible to address the problem at another level? For instance, when it's discovered that layout properties are being animated, see if it would be possible to create an equivalent effect in the compositing stage, if so, convert the layout position changes to transforms?

I realize that would probably not be easy, but maybe still possible without major architectural changes?

Re: 60 FPS Animations with CSS3

#16

Post by ZenoArrow »

whowouldathunk wrote: post #8
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.

> "Which is unlikely to happen anytime soon."

Mozilla are moving Servo's WebRender over to Firefox. The feature is called Quantum Render, you can read up about it here:

https://wiki.mozilla.org/Platform/GFX/Quantum_Render

To give some idea of what this means for CSS animation performance:

https://m.youtube.com/watch?v=u0hYIRQRiws

Re: 60 FPS Animations with CSS3

#17

Post by ash_gti »

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.

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))

Re: 60 FPS Animations with CSS3

#18

Post by whowouldathunk »

westoncb wrote: post #15
whowouldathunk wrote: post #8

Earlier quoted context omitted.

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.

Hmm... Wouldn't it be possible to address the problem at another level? For instance, when it's discovered that layout properties are being animated, see if it would be possible to create an equivalent effect in the compositing stage, if so, convert the layout position changes to transforms? I realize that would probably not be easy , but maybe still possible without major architectural changes?

Which thread are you going to do that work on?

It's complicated because layout changes can cause new elements to be created. Elements can be really expensive to create.

Re: 60 FPS Animations with CSS3

#19

Post by kllrnohj »

andrenotgiant wrote: post #12

My 2015 macbook pro will hit 150% CPU on basic SVG animation via CSS properties (like rotating an SVG element by setting `transform: rotate(90deg);`) even when using the best practices described in the article. This means long, slow CSS animation absolutely kills browser performance. Independent of your opinions on animation in the browser, is there a less CPU-intensive way to do SVG animation?

It's either just using SVG at all that's the problem or something in the SVG that's a problem. SVGs are generally not GPU rasterized since GPUs are really not built for paths. That's a whole research area in and of itself.

There are things you can attempt depending on your browser, though, such as avoiding non-convex paths in the SVG.

If you want good performance everywhere though the only real option is just don't use SVG if you need to animate it.

Re: 60 FPS Animations with CSS3

#20

Post by luke3butler »

ash_gti wrote: post #17
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.

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))

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.

Post reply on HN