Recreating the flying toasters from the After Dark screensaver that was very popular in the '90s will help you to learn a lot about CSS classes and more specific CSS animation as well as some Object Oriented Programming (OOP) concepts. However, it is important to note that CSS is NOT programming.
Most objects are composed of other objects. For example, most computers are composed of a desktop/laptop, a monitor and a keyboard in order for most people to use them.
As a result, before you can create most objects, you will need to gather the components that you will need to create a complete object.
As with all OOP programming languages, there are three things that you always do:
NOTE: Because we want to make the code generic, we will be using GENERIC names (e.g., object) instead of SPECIFIC names (Toaster) when referencing the headings and writing the code. This is helpful because it allows you to "switch" out the graphic with any other graphics that you want without much fuss.
The first thing you always do when using an OOP language is to create the object and position it where you want it to start.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Flying Objects</title> </head> <body> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Flying Toasters</title>
<style> body{ background:black; }
/*---------------------------ADD FIRST OBJECT -----------------------*/
.display_object {
position: absolute;
background: url(images/toaster-sprite.gif);
width:264px;
height:64px;
}
</style> </head> <body> <div></div> </body> </html>
Typically, you would give a <div> tag an ID name to, well, IDentify it; however, since we will eventually be created more than one object, we need to give it a class name so that we can target multiple objects with the same class name.
<body> <div class="display_object"></div> </body>
width:64px;
.display_object {
position: absolute;
background: url(images/toaster-sprite.gif);
width: 64px;
height: 64px; left: 631px; top: 30px;}
Now that we have created an object and have given it a name and set its position, it's time to tell the object to do something. There are two part to creating an animation with CSS:
<style>
/*---------------------------ADD FIRST OBJECT -----------------------*/
.display_object {
position: absolute;
background: url(images/toaster-sprite.gif);
width: 64px;
height: 64px;
left: 631px;
top: 30px;
}
/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {
animation: flap 0.4s steps(4) infinite alternate;
}
@keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
</style>
<body> <div class="display_object animate_object1"></div> </body>
<style>
/*---------------------------ADD FIRST OBJECT -----------------------*/
.display_object {
position: absolute;
background: url(images/toaster-sprite.gif);
width: 64px;
height: 64px;
left: 631px;
top: 30px;
}
/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {
animation: flap 0.4s steps(4) infinite alternate, fly 10s linear infinite;
}
@keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
} @keyframes fly {
from { transform: translate(0, 0); }
to { transform: translate(-1600px, 1600px); }
}
</style>
/* Position object off the screen 10% from the top and right so that it is responsive to various screen sizes. */
.position_object1 { right: 10%; top: -10%; } /* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {
animation: flap 0.4s steps(4) infinite alternate, fly 10s linear infinite;
}
.display_object {
position: absolute;
background: url(images/toaster-sprite.gif);
width: 64px; height: 64px;left: 631px;top: 30px;}
<body> <div class="display_object object_position1 animate_object1"></div> </body>
<body> <div class="display_object object_position1 animate_object1"></div> <div class="display_object object_position2 animate_object2"></div>
<div class="display_object object_position3 animate_object3"></div>
<div class="display_object object_position4 animate_object4"></div> <div class="display_object object_position5 animate_object5"></div>
</body>
/* Position object off the screen 10% from the top and right so that it is responsive to various screen sizes. */
.object_position1 { right: 10%; top: -10%; }
.object_position2 { right: 20%; top: -15%; }
.object_position3 { right: 5%; top: -11%; }
.object_position4 { right: 15%; top: -12%; }
.object_position5 { right: 12%; top: -13%; }
/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {
animation: flap 0.4s steps(4) infinite alternate, fly 10s linear infinite; }
.animate_object2 {
animation: flap 0.2s steps(4) infinite alternate, fly 8s linear infinite; }
.animate_object3 {
animation: flap 0.2s steps(4) infinite alternate, fly 16s linear infinite; }
.animate_object4 {
animation: flap 0.4s steps(4) infinite alternate, fly 11s linear infinite; }
.animate_object5 {
animation: flap 0.2s steps(4) infinite alternate, fly 7s linear infinite; } @keyframes fly {
from { transform: translate(0, 0); }
to { transform: translate(-1600px, 1600px); }
}
</style>
Now that you have a handle on how to create an animated object and then move it across the screen, let's create another object but this time simply move it across the screen.
<body>
<div class="display_object object_position1 animate_object1"></div>
<div class="display_object object_position2 animate_object2"></div>
<div class="display_object object_position3 animate_object3"></div>
<div class="display_object object_position4 animate_object4"></div>
<div class="display_object object_position5 animate_object5"></div>
<div class="display_object2 object2_position1 object2_animation1"></div>
<div class="display_object2 object2_position2 object2_animation2"></div>
<div class="display_object2 object2_position3 object2_animation3"></div>
<div class="display_object2 object2_position4 object2_animation4"></div>
<div class="display_object2 object2_position5 object2_animation5"></div>
</body>
/*______________________TOAST _______________________________*/NOTE: Notice that one of the animation has a value of alternate-reverse. This will cause that object to go in the REVERSE direction from the others. It is important to note that the second object is using the same @keyframe fly as the first object because they both perform the same task.
.display_object2 {
position: absolute;
background: url(images/toast1.gif);
width: 64px;
height: 64px;
}
/* Position our toaster just off the screen at the upper right */
.object2_position1 { right: 10%; top: -10%; }
.object2_position2 { right: -2%; top: -10%; }
.object2_position3 { right: 10%; top: -12%; }
.object2_position4 { right: 20%; top: -18%; }
.object2_position5 { right: 30%; top: -13%; }
/* Animate toast */
.object2_animation1 {
animation: fly 10s 2s linear infinite alternate-reverse;
}
.object2_animation2 {
animation: fly 10s 4s linear infinite;
}
.object2_animation3 {
animation: fly 10s 6s linear infinite;
}
.object2_animation4 {
animation: fly 10s 1s linear infinite;
}
.object2_animation5 {
animation: fly 10s 3s linear infinite;
}
</style>