Day 16. CSS Transitions

Notes

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.

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.