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



Elmer Balbin

Web developer from Bacolod, Steam Sale hunter, and casual DotA 2 player.

about me

Leave a comment


Get great deals on hotel rooms from all over the world BOOK NOW