Transforms can be fun when they really bring your page to life when coupled with a CSS3 transition. A transition is simply an animation from one set of CSS properties to another set over a specific amount of time.
Transitions allow the values of CSS properties to change over time, essentially providing simple animations. For example, if a link changes color on hover, you can have it gradually fade from one color to the other, instead of a sudden change.
Here are the steps to create a simple transition using only CSS:
1. Initial Style - Declare the original state of the element in the default style declaration.
2. Final Style - Declare the final state of your transitioned element; for example, in a hover state.
3. Include the transition functions in your default style declaration, using a few different properties: transition-property, transition-duration, transition-timing-function, and transition-delay.
The important point to note is that the transition is declared in the default state. Currently, the transition functions need to include the vendor prefixes -webkit-, -o-, and -moz-, for WebKit, Opera, and Firefox, respectively.