CSS keyframe animation basics

CSS3 offers us almost unlimited posibilities to make user experience much richer by using pure CSS animations. In this tutorial basic usage of @-webkit-keyframes will be reviewed. Only problem which doesn’t allow us to rely on this method is compatibility. Only webkit browsers (Google Chrome and Safari) supports it for this moment.

CSS keyframe animation basics

Demonstration source code

/* basic styling of our "strong" */
.pulsing{
			text-align:center;
			font:22px/50px Georgia, arial,sans-serif;
			display:block;
			height:50px;
			width:200px;
			-webkit-animation: pulsing 7s infinite;
			-webkit-border-radius:4px;
			-moz-border-radius:4px;
			border-radius:4px;
		}
/* animation styling step by step*/
		@-webkit-keyframes pulsing {
        0% {
                background:#161616;
				color:white;
				margin:0;
        }
        33% {
				background:#666;
				border:solid 3px #999;
				color:#4DBCE9;
				margin:100px 0 0 200px;
				-moz-transform: rotate(400deg);
				-webkit-transform: rotate(400deg);
				-o-transform: rotate(400deg);
				transform: rotate(400deg);
				padding:50px;
				-webkit-border-radius:20px;
				-moz-border-radius:20px;
				border-radius:20px;
			}
        66% {
               	color:#D6156C;
				margin:200px 0 0 100px;
				-moz-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				transform: rotate(360deg);
			}
        100% {
                background:#161616;
				color:white;
			}
		}

As you can see, animation is named “pulsing” and is separated from the rest of element’s styling. We call this animation by -webkit-animation: pulsing 7s infinite.
We declare that this animation should be used only in webkit browsers, which is obious. Pulsing is the name of the animation, “7s” is time in seconds required animation to complete. “Infinite” is an iteration count, this current declaration means, that this specific animation will be repeated in “endless mode”. When it’s 100% complete, it starts again. Remember: the world is round so as animation-circle, so on infinite animating you should style 0% and 100% identically. This way you will avoid breaks in sequential animation.

Alternatively, you can use keywords ‘from’ or ‘to’ instead of 0% and 100%.

Basic usage:

-webkit-animation: [name] [time-in-sec] [iteration-count];

Separate to understand

Calling keyframe animation with separate properties:

#ridiculously-long-id-of-the-element {
 -webkit-animation-name: animation-name;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
}

-webkit-animation-name

I believe it’s absolutely clear. Simply the name of the animation to call.

-webkit-animation-duration:

Duration of an animation in seconds. May be:

1. 1s; 2s; 1000s…
2. 0.1s; 0.01s…
3. .1s; .01s…

Second and the third is the same, so in the real world you should use third one as it is shorter (a bit) when timing is less than 1 second.

-webkit-animation-iteration-count

How many times it should be repeated? Once, twice, forever?

May be:

1. number, eg. 2, 10 or anything else.
2. “infinite” for endless repeating
3. 1 time is default

-webkit-animation-direction

The ‘animation-direction’ property defines whether or not the animation should play in reverse on alternate cycles. If ‘alternate’ is specified, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.

May be:

1. normal
2. alternate

-webkit-animation-timing-function

If you are familiar with “transition-timing-function”, then you know that is this. It describes how the animation will progress over one cycle of its duration.

May be:

1. ease (default)
2. linear
3. ease-in
4. ease-out
5. ease-in-out
6. cubic-bezier

To see how it looks in comparison, see this page.

-webkit-animation-delay

Specifies for how long this animation should be delayed before start. Default:0, counted in seconds as well.

Shorthand usage

There must be sequence in declaration, not all the properties have to be declared…

-webkit-animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]

Summary

Even if this is webkit-only functionality, it’s powerful tool to make your visitors user-experience much richer. We use these wendow prefixes as long as non-webkit browsers does not support it. This way unsupporting browsers will skip this code and save you some load time. Our example is just a bunch of quick code to show posibilities of this technique, your code doesn’t have to be too complex.