CSS Transitions, Continued

At the beginning of the semester, I played with a few simple transitions that can be found here. Now I'm going back and creating more examples to get more practice with them! There are different trainsition properties, so I've got examples to help show them better. Check them out!

Transition Property

For a full list of properties that can be animated. Go here.

Opacity

Left

Font-Size

Watch this font grow!

Transition Timing Function

Ease

Linear

Ease-In

Ease-Out

Ease-In-Out

Step-Start and Step-End

Note: Step-start on the left starts immediately. Step-end on the right starts after 1 second (end of interval).

Transition Duration

Default - 0 seconds

1 second

3 seconds

Transition Delay

Default - 0 seconds

5 seconds

-1 second with duration