An interactive guide to CSS transitions | Josh W Comeau

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-change is 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>

Explore Other Notes

Newer

Facebook vs publishers

I find the whole Australian link tax to be silly and a rare instance where I'm very much on the side of Big Tech, but Thomas has done a much better job of explaining why it's all a farce than I […]

Older

42 admissions

Ben has crafted an incredibly thoughtful, powerful, and quotable article on just about everything, but particularly life online and how people in the web community might be able to go about improving […]
  • 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 [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.