CSS3 is now animation, transparency, and more (part 2)

Continuing the series of articles “CSS3 Now!” ( The first article is CSS Transitions ), I would like to talk about animation using CSS3, and specifically - @keyframe and animate . Also, in the article we will touch on the opacity properties and the rgba () color model, cross-browser use of border-radius , box-shadow and gradients .

Keyframe

Currently, support for such animation exists only in WebKit-based browsers — Chrome and Safari. But the topic is so interesting that it is worth considering it - after all, the future is not far off, and soon after Chrome other browsers will catch up.

The first point in the creation of CSS animation is the creation of keyframes (key frames). In general, Keyframe is a set of rules that will be applied during an animation. You can make a rough comparison of keyframes with functions — first we declare keyframes, and then call this animation anywhere on the CSS.

Let's make an example of the simplest animation - when you hover on a ball, it starts jumping.
Ball:

#ball { width: 60px; height: 60px; border-radius: 30px; background: #f00; position: absolute; bottom: 0; } 

Now create keyframes:

 @-webkit-keyframes bounce { 0% { bottom: 0; } 50% { bottom: 100px; } 100% { bottom: 0; } } 

')
First we set the name of our animation - in the example it will be “bounce”. Then we describe the key animation frames:
0% { bottom: 0; } 0% { bottom: 0; } - at the beginning the ball is in the starting position;
50% { bottom: 100px; } 50% { bottom: 100px; } - in the middle of the animation, the ball reaches its maximum height;
100% { bottom: 0; } 100% { bottom: 0; } - by the end of the animation the ball falls to its original place.

Create an animation:

 #ball:hover { -webkit-animation: bounce 1s infinite ease; } 

With this code, we set the animation when the cursor hovers over the ball. The order is as follows: < keyframe> < > < > < > .

Done ! Our ball jumps like a bun! And now look at this example . The combination of box-shadow and keyframes gives us a wonderful form highlighting effect to emphasize attention. It can be used, for example, when checking forms to highlight erroneous fields.
Pulsating form code:

 @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2); } 50% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9); } 100% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2); } } form input[type="text"]:focus { -webkit-animation: pulse 1.5s infinite ease-in-out; } 

Promised rgba () is noticeable in the code. As it has already become clear to many, this is the RGB + alpha channel color model, which allows us to set the translucency where it is required.

Opacity

But this property can already be used to the full extent - it works in all browsers except our favorite. True, for IE there is the following fix:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Here is an example of a translucent cross-browser button:

 .foo { opacity: 0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } 

For those who do not know yet - there is a wonderful thing about CSS3Pie - it allows us to use rounded corners, shadow and gradients right now and absolutely cross-browser: IE 6-8, Chrome, Safari, Mozilla, Opera! An example of cross-browser use of all these properties:

 border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -moz-linear-gradient(#EEFF99, #66EE33); background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/PIE.htc); 

Test pages: ball , shape , cross-browser properties .

Thank you for your attention and enjoy your layout!