When your website means business.

Animation, CSS3 | Type: CSSCSS Transitions

Some transition basics.

Transition property to be animated and duration established in initial state:
a  { background:#ddd;
    -webkit-transition-property: background;
    -moz-transition-property: background;
    -o-transition-property: background;
    -ms-transition-property: background;
    transition-property: background;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s; }

a:hover { background:#c00 ;}

Timing Functions
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
also:
linear
ease-in
ease-out
ease-in-out

Specify delay (2nd number, delay of half a second)
-webkit-transition: all 3s .5s;
-moz-transition: all 3s .5s;
-o-transition: all 3s .5s;
transition: all 3s .5s;

Reference Links

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept