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.
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.