Create Game-Like Interfaces with CSS3 – part 1

CSS3 Animations are perfect for recreating the kinds of interfaces you see in many games. For instance, many Playstation RPG’s would have interesting menu screens with moving backgrounds or animated buttons as you selected them. Effects like this are easy to do in CSS3 (Animations) and can really add a nice effect to your applications – especially games.

Here’s an example (sorry, webkit only for now it appears)

The magic is in two classes. Let’s look at each one.

.sliding {
-webkit-animation-name: “bgslide”;
-webkit-animation-duration: 300s;
-webkit-animation-iteration-count: infinite;

}

This code essentially says to use the animation “bgslide” and take 300 seconds to run it to completion, as well as do this forever.
Now “bgslide” is the name of an animation which moves our background image slowly over time (since it tiles infinitely, we dont have to worry about repeating the image). CSS3 animations allow you to take any numeric property and gradually change it over time. For example:

@-webkit-keyframes bgslide {
from {
background-position: 0px 0px;
-webkit-animation-timing-function: linear;
}

25% {
background-position: -1000px 1000px;
-webkit-animation-timing-function: linear;
}

50% {
background-position: 0px 0px;
-webkit-animation-timing-function: linear;
}
75% {
background-position: 1000px -1000px;
-webkit-animation-timing-function: linear;
}
to {
background-position: 0px 0px;
-webkit-animation-timing-function: linear;
}
}

This code says to the browser that there are 5 keyframes which progress from some values to some other values, going through the other values as that % of the animation has progressed. Notice there’s no timeframe here. That timeframe is what you defined in the -webkit-animation-duration and allows for more versatile animations — you might invoke this slowly in one instance and very quickly in another case. The -webkit-animation-timing-function tells the browser how to handle the values going from one state to another. I highly encourage you to check out the Safari CSS documentation on this, as it is much more practical and readable than the W3C.

For the second “effect” we take the title of our game and change the color of the text:

.colorcycle {
-webkit-animation-name: ‘colorcycle’;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}

In this case we set the -webkit-animation-timing-function in the class definition, and we tell this animation to go “back and forth” from 0% to 100% and back to 0% via -webkit-animation-direction. Webkit (Chrome, Safari, etc) seems to know when you animate a color how to interpolate the various values between any two colors, so you get a nice smooth effect.

@-webkit-keyframes colorcycle {
0% { -webkit-text-fill-color: red;}
20% { -webkit-text-fill-color: green;}
40% { -webkit-text-fill-color: orange;}
60% { -webkit-text-fill-color: purple;}
80% { -webkit-text-fill-color: yellow;}
100% { -webkit-text-fill-color: blue; }
}

You can set any number of “frames” you like, and you can do all kinds of changes to your element in each frame. You could really do some sophisticated effects using just these simple techniques. In part 2 I’ll talk about buttons and other fun game-like effects. Part 3 will give us “sparkles”!

Background image courtesy of DinPattern.com