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

Web developer from Bacolod, Google Local Guide, and casual DotA 2 player.

about me

Leave a comment

avatar

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