Basic CSS Animation
Let’s Make a Red Square Dance!
You may be familiar with CSS’s ability to create a beautiful user interface, but did you know that CSS can be used to make animations on you website as well? Today I’ll show you how to make a simple CSS animation that will be your first step to leveling up your user experience.
In this example I am going to show you how to animate a simple image of a red square on you web page. First, create a HTML page. In the body section, add a img element with a class of “red_square” and use any image on Google images (or DuckDuckGo) as the source. Then, create a CSS page in the same folder and link it to the HTML page using the link tag.
Within the CSS file, refer to red_square class using a “.”. Remember a “.” refers to a class while a “#” refers to an id.
Now let’s make the red square spin twice when the mouse hovers over it. We first need to make a keyframe. Within the keyframe we will be able to define the initial and final state of the red square. The keyframe will have a name, which will be “spin”, and it will describe an initial rotation of 0px that transforms to a rotation of 720degs.
We can now use this keyframe with the red square. The next step is to specify that the CSS effect should take place while the mouse is hoving over the image, using :hover. Within the CSS section, we need to identify the animation name and tell CSS how long we want the animation to last.
I inputted the keyframe name, “spin”, for the animation-name, and choose the animation to last for 10s by using animation-duration.
At this point you have already created a working CSS animation! The red square will now rotate twice when you hover the mouse over it. This is just the tip of the iceberg in CSS animation and I hope this brief introduction has whetted your appetite!
