Some things are more complex/fancy than useful. Consider the Star Wars Crawl, The Matrix, or a 3D cube. These are often proof’s of concept/fun projects that see what can be done. Of course, soon we’ll see clients who want to have their websites scroll vertically automatically like the matrix, or into a distance like with Star Wars, but we’ll save that discussion for another day.
CSS3 allows for you to create basic animations fairly easily. There has been a lot of discussion about the usefulness of CSS3 animations, but we will look simply at how to create them.
The key things to remember is that CSS3 Animations are:
- not supported on every browser
- can replace animated gifs, movies, and Flash in some instances
- Chrome and Safari require the -webkit prefix to make it work, so you will need to double everything you do
- Animations will not work in IE 9 and earlier
Defining the Key Frames
In order to have an animation, we need to use the @keyframes rule. To use @keyframes you will need to:
- Use a name (like a variable) to hold your key frames
- Define a % complete to define the key frame
- Base a rule set at each key frame
/* key frame example */
@keyframes hoverBox {
0% {background:#900;}
100% {background:#ff0;}
}
Applying the Animation
After you have your key frame variable, and frames, defined, you need to use them. This will be in the form of something like the following CSS:
#box {
width: 200px;
height: 200px;
background-color: #900;
}
#box:hover {
animation:hoverBox 1s;
}
The animation property defines which variable is going to be run. It also defines how many milliseconds or seconds it needs to run. For milliseconds, use the ms suffix to the number. For seconds, use the s suffix as in the example below. You can also write it out in a little more space using the individual commands.
#box:hover {
animation-name: hoverBox;
animation-duration: 5s;
}
Holding on the Final Frame
However, one problem with this is that it resets the value back to the initial state when the animation completes. If I want to have it stay on the final keyframe, I will need to add one more property. That is the animation-fill-mode which can be either forwards, backwards, none, or both.
We can even simplify it to be in our animation piece
#box:hover {
animation:hoverBox 1s forwards;
}
Of course, other properties can be set as well, such as size, positioning, and more. This was just shown to start the process.
CSS3 – Animations was originally found on Access 2 Learn
