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;
You must preface these properties with the relevant browser prefixes for Mozilla, WebKit, Opera, and Microsoft browsers.
Transitions have properties such as
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:
property requires a value of zero seconds or greater. The following
declaration specifies that the transition should take 1.25 seconds to
transition-delay property is given a value greater than zero seconds ...