{"id":4921,"date":"2021-11-08T01:00:00","date_gmt":"2021-11-08T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-transition-timing-function\/"},"modified":"2024-02-08T00:33:28","modified_gmt":"2024-02-07T23:33:28","slug":"css-transition-timing-function","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-transition-timing-function\/","title":{"rendered":"CSS Transition [Timing Function & Delay]"},"content":{"rendered":"\n

This is part 2 of the complete guide to CSS transitions. In this post, you’ll learn the advanced Jedi skills of CSS transition-timing-function<\/code>, and transition-delay<\/code>!<\/p>\n\n\n\n

If you missed part 1, click here to learn about CSS transition-duration and transition-property<\/a>.<\/p>\n\n\n

CSS Transition-timing-function<\/h2>\n\n\n

This is where things get really cool.<\/p>\n\n\n\n

While transition-duration<\/code> controls how long it takes to transition from one state to the next, transition-timing-function<\/code> controls the rate of the transition within<\/em> that time.<\/p>\n\n\n\n

For example, if you’re moving a box from one side of the screen to another, do you want it to move at a constant pace? Or do you want it to move quickly at first, but then slow down as it nestles into its finishing position?<\/p>\n\n\n\n

That’s what CSS transition-timing-function<\/code> can do for you. There are five commonly used pre-set options:<\/p>\n\n\n\n

    \n
  • linear: The transition happens at a constant speed.<\/li>\n\n\n\n
  • ease: Starts off fast, but slows down just before the end. This is the default value.<\/li>\n\n\n\n
  • ease-in: Start off slow, and gradually builds up speed.<\/li>\n\n\n\n
  • ease-out: Starts off fast, but slows down early.<\/li>\n\n\n\n
  • ease-in-out: Starts off slow, slows down early, but fast in the middle section.<\/li>\n<\/ul>\n\n\n\n

    This is easier to understand visually – hover over the image below to trigger the boxes to move:<\/p>\n\n\n\n