CSS 3 - Part 4

Go back to CSS 3 - Part 3

Animating with CSS3

CSS3 includes the @keyframes rule that allows you to create animations and control their timing. Essentially, this rule creates a transition from one set of CSS styles to another. You can specify when the change will happen using percentage (like you did with gradients earlier in this post) whereby 0% represents the start of the animation and 100% represents the end. Or, alternatively, you can simply use the words “from” and “to”
(which is the same as using 0% and 100%). You can define multiple points of change, (hence the name “keyframes”), in a single animation.

Like the @font-face rule, the first thing you must do is define an @keyframe rule and give it a unique name like “CoolColors” as shown in the example below. In this animation, the colors will shift from blue to black, although you can also specify hexidecimal numbers such as #3e3e3e instead.

@keyframes CoolColors {
       from { background: blue;
       to { background: black; }
}

The next step is to bind the CoolColors animation to one of your objects and assign a duration such as 5 seconds (which is represented as 5s). By default, an animation’s duration is 0 so nothing happens. In order for your animation to be visible, therefore, you must enter a duration value. In this example, over the course of 5 seconds, the 200x200 box will turn from blue to black, and then return to its original yellow color (note that its background is set to yellow).

div {
       width: 200px;
       height: 200px;
       background: yellow;
       animation: CoolColors 5s;
}

The only browsers that support @keyframes are Firefox, Opera, Safari, and Chrome (not Internet Explorer). So unfortunately, if you want to accommodate all of them, you must use the appropriate prefixes and duplicate not only your initial @keyframes code, but also your object’s code for each browser. That’s a lot of code just to change from one color to another!

First the @keyframes duplicates:
@keyframes CoolColors {
        from {background: blue;
        to {background: black;}
}
@-moz-keyframes CoolColors {
        from {background: blue;}
        to {background: black;}
}
@-webkit-keyframes CoolColors {
        from {background: blue;}
        to {background: black;}
}
@-o-keyframes CoolColors {
        from {background: blue;}
        to {background: black;}
}

Then the div property duplicates:

div {
       width: 200px;
       height: 200px;
       background: yellow;
       animation: CoolColors 5s;
       -moz-animation: CoolColors 5s;
       -webkit-animation: CoolColors 5s;
       -o-animation: CoolColors 5s;
}

Let’s now look at an animation example in which a few changes occur at different percentage marks. To keep it simple, we will not replicate the code needed for this animation to work on all the browsers:

@keyframes CoolColors2 {
       0% {background: #47619d; left:0px; top:0px;}
       25% {background: #d0e545; left:100px; top:0px;}
       50% {background: #45a3e5; left:100px; top:100px;}
       75% {background: #f0cd29; left:0px; top:100px;}
       100% {background: #f87386; left:0px; top:0px;}
} 

In this case, we’ve defined 5 points of change at the 0, 25, 50, 75, and 100% marks. At each point, we change the color (defined by a hexidecimal number), and we also change the location of the object on the screen using the “left” and “top” properties.

Now, let’s bind CoolColors2 to our div object and use several properties to control the animation. The properties available to you are:

• Duration
Specified in seconds such as 10s, the duration accounts for the whole 0–100% animation timeline
• Timing-Function
This property allows you to “ease-in” or “ease-out” of your animation to make a nice gradual start or finish. Or you can use “ease-in-out” for the value which adds a gradual start and stop to your animation. If you enter “linear” as the value, the animation will have the same speed start to finish.
• Delay
You can delay the start time of your animation by defining in seconds such as 2s.
• Iteration-Count
By default, an animation plays once and stops. If you want it to loop, you can define “infinite” as your iteration-count value. Otherwise, you can enter the number value of how many times the animation should play.
• Direction
Though there is a “normal” value for the direction property, by default, your animation will play through your keyframes in the order you list them in your @keyframes rule. If you want the animation to play through forwards and then backwards, however, enter “alternate” as your value.

Here’s an example of how all these values might look when attached to your div object:

div {
       width: 200px;
       height: 200px;
       background: yellow;
       animation-name: CoolColors2;
       animation-duration: 10s;
       animation-timing function: ease-in-out;
       animation-delay: 2s;
       animation-iteration count: infinite;
       animation-direction: alternate;
}

Of course, to support all the browsers, each of these “animation” code lines would need to be replicated for each browser you want to support. Here’s the addition of just Safari:

div {
       width: 200px;
       height: 200px;
       background: yellow;
       animation-name: CoolColors2;
       animation-duration: 10s;
       animation-timing-function: ease-in-out;
       animation-delay: 2s;
       animation-iteration-count: infinite;
       animation-direction: alternate;
       -webkit-animation-name: CoolColors2;
       -webkit-animation-duration: 10s;
       -webkit-animation-timing-function: ease-in-out;
       -webkit-animation-delay: 2s;
       -webkit-animation-iteration-count: infinite;
       -webkit-animation-direction: alternate;
}

Next - CSS 3 - Final