How to Create Transitions with CSS 3 - dummies

How to Create Transitions with CSS 3

CSS 3 gives you many exciting features to create cool effects in the design of your website for displaying on the iPad and iPhone. The CSS 3 transition properties make it possible to change the state of an element. Using transitions, you can do things like change an element’s color or make text fade away when someone taps it.

Using transitions, you can cause an element to enlarge when it’s touched (or clicked), but CSS 3 has its limitations. After the larger image is enlarged, as shown in this figure, you have no way to close it unless you combine CSS 3 with JavaScript.


The webkit-transition includes several properties. (Note: If multiple options are specified, each one is applied in the order listed.):

  • -webkit-transition-property — Specifies which property, such as text color, the transition affects.

  • -webkit-transition-duration — Specifies the number of seconds until a transition occurs. The duration can be expressed in seconds as 1s, 2s, and so on, or in milliseconds, such as 500ms, 250ms, and so on.

  • -webkit-transition-delay — Specifies any delay before a transition begins. For example, you add a three-second delay by including webkit-transition-delay: 3s.

  • -webkit-transition-timing-function — Specifies the speed curve of a transition and enables you to change the speed over the duration of a transition by specifying as many as five predefined values:

    • ease — The default value; creates a transition effect that starts slowly, grows fast, and then slows again

    • linear — Creates a transition with the same speed from beginning to end.

    • ease-in — Creates a transition that starts slowly.

    • ease-out — Creates a transition that ends slowly.

    • ease-in-out — Creates a transition that starts and ends slowly.

    • cubic-bezier — An advanced option that makes it possible to define your own values; a function, based on the Bezier curve that has been used in computer graphics since the 1960s, uses a sequence of numeric values from 0 to 1.