Visual overview of the different transition timing functions in CSS3

This is just a quick post to show you the basic timing functions being used in transition effects and how they are different from each other. For visualization purposes, I added an alternating animation loop of 1 second for each function. You can find the HTML and CSS codes below so that you can copy and play with the values on your own.

linear (same speed)

ease (slow > fast > slow)

ease-in (slow > fast)

ease-out (fast > slow)

ease-in-out (slow > med > slow)

cubic-bezier(.17,.67,.95,.54) See link

HTML

CSS

Elmer Balbin

Full-stack developer from Bacolod, Google Local Guide, Agoda affiliate and casual DotA 2 player.

Buy me a burgerBuy me a burger

Leave a comment

avatar