Transitions CSS3 Now!

"
CSS3 and HTML5 are developing faster and faster, browsers begin to support more new features. In this regard, I would like to make a series of review articles about these new technologies. In this cycle, I would like to consider such CSS3 properties like transition, animate, opacity and rgba () model.

Using CSS3

You can often hear many web designers say “I can’t wait, when it will be possible to use CSS3 ..”. In the meantime, you can use it today. Yes, the use of CSS3 for critical moments of the site is now impossible. But to use it to add small, non-critical parts for the project is feasible, possible and necessary.
For example: It looks really nice when the link on your site changes its color when you hover your mouse over it. Color varies greatly, with no smooth transition, but it does not affect the general appearance of the site, its usability. But the presence of a smooth transition of a color can serve as a little detail, which will make your site more vivid.
In this article we will have a look at CSS-property transition. All examples are for the webkit engine. Just below we consider cross-browser compatibility of these methods.

Transition

W3C gives the following definition of transitions:

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
CSS Transitions let you assign changes of CSS properties gradually and over some time period. Let’s start with the simplest example – add a smooth transition of the reference’s background.

Demo
The classic realization:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

If you hover the mouse over the link the background color will change from light blue to dark blue and the font color – from black to white. The ordinary situation.
Now let’s add the smooth transition of the background using CSS transitions:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition-property: background;
 -webkit-transition-duration: 0.5s;
 -webkit-transition-timing-function: ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Now our background smoothly changes its color over half a second! As with other properties of CSS, we can combine all the transition properties in one:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: background 0.5s ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Now we’ll add a smooth changing of font color:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: background 0.5s ease, color 0.3s ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

If you hover the mouse, the following code will gradually change the background color for half a second and the font color within 0.3 seconds. If we need the same properties for all elements, we can replace

-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

with

-webkit-transition: all 0.5s ease;

Now Transition-effect will be applied to all the changing properties of an event and with the same parameters – 0.5 seconds, ease-effect. Also, we can add a delay to the effect:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: all 0.5s ease;
 -webkit-transition-delay: 0.5s;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Now, our animation will run in half a second after hovering the mouse. You can apply transition property to anything – the background color, length, font size, etc. This is mainly properties that specify the color or properties that can be expressed in units of length (px, em, ex) or percentage. As an event we can also use pseudo: focus and: active. Actually – you can use the transition with any selectors.
The final summary table:

transition-property	The property to which we apply the animation	Virtually any property of CSS: color, background, width, font-size etc.
transition-duration	Duration of the animation	Time in seconds: 0.5s – half a second, 60s – one minute, etc.
transition-timing-function	Temporary function that is used for animation	ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay	Delay of the animation	Time in seconds: 0.5s – half a second, 60s – one minute, etc.

Browsers

Chrome, Safari, Opera 10.5+, Firefox 4+
In this article the rules for WebKit-browser were used with the prefix. Do not forget to add in your projects, vendors prefix -moz- and -o-. On the example page, you can spy a cross-browser code (without IE, of course).
Demo
"

Posted in: CSS3,Showcase,Tips