Once again, Josh has put together an excellent introductory tutorial to a subject that is still packed with useful tips for even the most advanced user; in this case, CSS transitions.
On the will-change CSS property and how it allows developers to specify that an element should use the GPU (hardware acceleration):
will-changeis a property that allows us to hint to the browser that we're going to animate the selected element, and that it should optimize for this case.
In practice, what this means is that the browser will let the GPU handle this element all the time. No more handing-off between CPU and GPU, no more telltale “snapping into place”.
👆 Helps to prevent rendering discontinuities as an element is passed between CPU and GPU.
On thinking about animations in a more organic, user-oriented way:
I believe most developers think in terms of states: for example, you might look at this situation and say that we have a “hover” state and a default state. Instead, what if we thought in terms of actions? We animate based on what the user is doing, thinking in terms of events, not states. We have a mouse-enter animation and a mouse-leave animation.
Excellent tip: use transition-delay to prevent things like dropdown menus from collapsing if the user accidentally moves out of them. It provides a little leeway in the UX.
On benefits of using transform over other attribute changes:
There's another benefit to hardware acceleration: we can take advantage of sub-pixel rendering.
Another useful tip: use wrapping elements to remove the "doom flicker", that moment where hovering an element moves it out of the cursor's hitbox, and it just bounces between :hover states rapidly. Example:
<button class="btn">
<span class="background">Hello World</span>
</button>
<style>
.background {
will-change: transform;
transition: transform 450ms;
}
.btn:hover .background {
transition: transform 150ms;
transform: translateY(-10px);
}
</style>