Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Transitions

Also appearing on all the latest versions of the major browsers (including Internet Explorer 10, but not lower versions) is a dynamic new feature called transitions. These specify an animation effect that you want to occur when an element is transformed, and the browser will automatically take care of all the in-between frames for you.

There are four properties you should supply in order to set up a transition, as follows:

transition-property       :property;
transition-duration       :time;
transition-delay          :time;
transition-timing-function:type;

Note

You must preface these properties with the relevant browser prefixes for Mozilla, WebKit, Opera, and Microsoft browsers.

Properties to Transition

Transitions have properties such as height, border-color, and so on. Specify the properties you want to change in the CSS property named transition-property (here the word “property” is used by different tools to mean different things). You can include multiple properties by separating them with commas, like this:

transition-property:width, height, opacity;

Or, if you want absolutely everything about an element to transition (including colors), use the value all, like this:

transition-property:all;

Transition Duration

The transition-duration property requires a value of zero seconds or greater. The following declaration specifies that the transition should take 1.25 seconds to complete:

transition-duration:1.25s;

Transition Delay

If the transition-delay property is given a value greater than zero seconds ...