Revision: 53086
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 13, 2011 02:14 by Barlon
Initial Code
/* Attach transition instructions - Long version */
a.foo {
background: #000;
-webkit-transition-property: background
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
-webkit-transition: background 0.3s ease 0.5s; /* Can replace last 4 lines above */
-webkit-transition: all 0.3s ease 0.5s; /* Transitioning all possible properties (color and backgrind in this case)*/
transition: background 0.3s ease 0.5s; /* Let's put this here since we hope one day transition will be standard */
}
/* Attach transition instructions - Short version (showing 2 properties) */
a.foo {
background: #000;
-webkit-transition: background 0.3s ease 0.5s, color 0.2s linear;
}
/* Trigger the transition by hover or focus */
a.foo:hover, a.foo:focus, a.foo:active {
background: #CCC;
color: #678;
}
Initial URL
Initial Description
The transition instructions are attached to the normal state and therefore declared only once, then triggered on for eg. hover.
Initial Title
CSS3 Transition
Initial Tags
CSS3
Initial Language
CSS