Design, CG Graphics & Inspiration
CSS3 Now! Animation, Transparency, and more (Part 2)

CSS3 Now! Animation, Transparency, and more (Part 2)

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

Keyframe

At the moment the support for such animation is only for browsers based on WebKit – Chrome and Safari. But the subject is so interesting that it is worth to be considered, because the future is not that far, and soon after Chrome other browsers will catch up with it.
The first item in creation of CSS animation is the creation of keyframes. In general, Keyframe is a set of rules that are being applied during the animation. We can make a rough comparison of keyframes and functions – first, we declare the keyframes, and then we call this animation anywhere in the CSS.

We make the simplest example of animation – when you hover on the ball, he starts to jump.

Ball:

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

Now create a keyframe:

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

First, we set the name of our animation – in the example it would be «bounce». Then we describe the key frame animation:
0% {bottom: 0;} – at the beginning the ball is in its original position,
50% {bottom: 100px;} – in the middle of animation the ball reaches its maximum height,
100% {bottom: 0;} – in the end of animation the ball falls on the initial place.

Create an animation:

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

With this code we set the animation when we hover over the ball. The order is the following:

<name of our keyframe><time animation><iterations><time function>

Done! Our ball bounces! Now look at this example. The combination of box-shadow and keyframes gives us a wonderful light effect of the form for emphasis. It can be used, for example, when checking the forms to illuminate the wrong fields.

The code of pulsating form:

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

In the code we can see the promised rgba (). As many of you have already noticed, this is a color model RGB + alpha channel that allows us to set translucency, where it is required.

Opacity

And this feature is already can be used whenever you want – it works in all browsers, except of our favorite. However, for the IE there is a following fix:

filter:progi:d:DXImageTransform.Microsoft.Alpha(opacity=50);

Here is the example of translucent cross-browser button:

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

For those who don’t know yet – there is a wonderful thing CSS3Pie – it allows us to use rounded corners, gradients and shadows now and it is absolutely cross-browser: IE 6-8, Chrome, Safari, Mozilla, Opera! An example of cross-browser use of all of 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 page: ball, shape, cross-browser features.
Thank you and have a nice layout!

  • Arseny Zarechnev,
  • July 2, 2011

SHARE THIS POST

Freelancer with experience. I am interested in everything concerning the sphere of web development, especially the latest trends in HTML5 and CSS3. Front-end developer Evrone.com.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Slaket

    Animators are not going to do all this. Programmers are not animators. We need tools like Sencha and Edge to produce. Simple as that.

  • Slaket

    Animators are not going to do all this. Programmers are not animators. We need tools like Sencha and Edge to produce. Simple as that.