Hacker News Reader

Comment by dmitriid | Hacker News Reader

And then you try implementing any of them and realise that even the simplest examples often break in subtle and not-so-subtle ways, have hidden and not-so-hidden restrictions, may or may not be hardware accelerated, may or may not break layout, cause reflow and/or repaint, can't be stopped once started...

View on HN

My favourite example is, of course, animating height: auto and width: auto. A detailed discussion on why it's not possible and the (rather insane) tricks you have to do to animate these two properties is here: https://css-tricks.com/using-css-transitions-auto-dimensions...

You should only animate GPU-accelerated properties (transform, opacity) if you care about performance and responsiveness, or in the worst case some properties that trigger paint (color, backgroundColor, etc.).

That's what I (sort of) learned the hard way :) So most useful animations like the collapsing list item in the article are nigh impossible in CSS.

That's true, there are some limitations. Sometimes you can still do those sort of things in CSS if you set the target values using JS (instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed). If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.

> instead of changing height to 0, change scaleY to 0 and translate up the elements from below with the height of the element that was removed

This will leave a gap below the elements

> If all elements are same height, or the height is known beforehand you can just hardcode that translate value into the animations.

The problem is that there's rarely if ever a case when you know the height of all elements on a page :(

> This will leave a gap below the elements.

Recursively apply same logic to rest of page!

Ah! Didn’t think about that :)

It's great until you discover things like position-fixed doesn't work when there's an ancestor with a transform.

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

It's really fun because even a will-change: transform will trigger it.

"can't be stopped once started..." what a shame, what a shame.

Reply on news.ycombinator.com