- The long hand for the
- Animations directly affect the speed and responsiveness of our site. Keeping it somewhere between the
300msensure they’re not too fast or slow.
- I’ve had a hard time recalling the differences between timing functions like
ease-in. An easy way to recall them is by replacing
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.