CSS3 now - transition

CSS3 and HTML5 are evolving faster and faster, browsers are beginning to support more and more new chips and buns. In this regard, I would like to look into our future paradise of web designers and make a cycle of review articles on new buns and chips of these technologies.
In this loop, I would like to look at CSS3 properties such as transition , animate , opacity, and the rgba () model.

Using CSS3.

You can often hear from many web designers the words “I can’t wait to see when CSS3 can be used ...”. Meanwhile, you can use it today. Yes, using CSS3 for critical moments of the site is now impossible. But to use it to add small, non-critical parts for the project is quite real, possible and necessary.


Example: Your site looks great change the color of the links in the menu when you hover the mouse. Color changes dramatically, without a smooth transition, but this does not affect the overall appearance of the site, its usability. But the presence of a smooth color transition can serve as just that little detail that will add a bit of “life” to your site.
')
In this article we will look at the CSS transition property.
All examples are given for the webkit engine. Below we consider the cross-browser compatibility of these methods.

Transition

W3C gives the following definition of transitions:

Transitional CSS values ​​to occur
smoothly over a specified duration.

CSS Transitions allows you to assign changes to CSS properties smoothly and over time.

Let's start with the simplest example — add a smooth transition to the background of a link.
Classic implementation:

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

When you hover the mouse over the link, the background will change its color from light blue to dark blue, and the font color from black to white. Ordinary situation.
Now add a smooth background change 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 changes color smoothly within half a second! As with other CSS properties, we can combine all transition properties into one:

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

Now add a smooth font color change:

 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; } 

This code when you hover the mouse will smoothly change the background color for half a second and the font color for 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; 

on

 -webkit-transition: all 0.5s ease; 

Now the Transition effect will be applied to all properties changing at the event and with the same parameters - 0.5 seconds, the ease effect.

We can also add a delay for 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 work half a second after mouse hovering.

You can apply the transition property to anything - background, color, length, font size, etc. These are mainly properties that specify a color or properties that can be expressed in units of length (px, em, ex) or as a percentage. As an event, we can also use pseudo-classes: focus and: active. In general, you can use transition with any selectors.

Summary pivot table:

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

Browsers

Chrome, Safari, Opera 10.5+, Firefox 4+
The text of the article used the rules with a prefix only for WebKit-browsers. Do not forget to add vendor prefixes -moz- and -o- in your projects. On the example page, you can peep the cross-browser code (without IE, of course).

If the article finds its interested readers, in the next post we will look at keyframe animation, the opacity property, and the rgba () model. Thanks for attention!

PS Thank you lahmatiy for the amendments in the comments.