Performant CSS Animations: Netflix Case Study

Animating properties such as width or top forces the browser to recalculate the size and location of every component that may have changed, called a layout. That’s not great for performance. Here’s how you can use two properties (opacity and transform) to create animations that don’t generate a redraw…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Anima – CSS animations with a soul

CSS animations have some limits, the main is that you can’t really have full control over them. And it’s near impossible to stop transitions without dirty hacks.Another problem is calculating percents for keyframes. People create animations with time in mind, not percents. You always think of “it should fly and rotate for a half of a second, then stand still for another second and continue flying”, and not 0% start 50% fly 70% stop 90% fly.Anima gives you the ability to use delays and durations normally, even for pure CSS animations. It has two modes: JS and CSS. The first one doesn’t really use CSS transitions or @keyframes. On the contrary, it uses CSS transforms and 3d-transforms together with Javascript to create animation. You have full control over the flow, so you can start, stop, cancel animations and even create event-based stuff. CSS mode allows you to generate pure CSS animations, but it has less control features for now…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)