12 Weeks

Day 16. CSS Transitions

October 18, 2019


CSS Transitions

  • It’s safer to declare animation duration in milliseconds because most JavaScript animations will make use of milliseconds by default.
  • The long hand for the transition property is transition-property, transition-duration, transition-timing-function and transition-delay.


  • Animations directly affect the speed and responsiveness of our site. Keeping it somewhere between the 250ms and 300ms ensure they’re not too fast or slow.

Timing Functions

  • I’ve had a hard time recalling the differences between timing functions like ease-out and ease-in. An easy way to recall them is by replacing ease with slow.

More like slow-in and slow-out. This way, I understand that ease-in means something comes in slowly but picks up speed as it leaves and ease-out comes in faster but leaves slowly.

  • Firefox has a great way to debug animation timing functions. We can see this if we

    • right-click on the element
    • inspect and navigate to styles in dev Tools
    • click on the lightening icon in the dev Tools.

    It opens up an interface like this for editing the animation functions.

  • Or we could go to cubic-bezeir.com to play with a variety of these functions.
  • It’s conventional to use accelerating timing functions for user initiated actions and deaccelerating functions for system initiated actions. It’s more like a differentiator between things that they impact and things that have impacted them.

Quick and Scrappy notes from 12 weeks of learning UX Engineering for the web. More