2 ms·
You should only animate GPU-accelerated properties (transform, opacity) if you care about performance and responsiveness, or in the worst case some properties t
by XCSme 7y ago
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.).
- dmitriid 7y agoThat'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.
- XCSme 7y agoThat'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.
- dmitriid 7y ago> 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 :(
- gwillz 7y agoIt'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 https://bugs.chromium.org/p/chromium/issues/detail?id=20574 It's really fun because even a will-change: transform will trigger it.