Tutorial: Animation with CSS

A lot of the CSS we learned in the web unit involves simple static styling for web pages. That is very useful, but CSS can also be used to make simple animations. Suppose you have a simple block of text, and want it to change colors and resize. You might have something like this in the body of an HTML document:

In the CSS, you need to define the animation. This can be done with the “@keyframes” keyword. In this example, you might want to define an animation called “change-color”. This animation changes the color of text from black to red. A basic animation uses the keywords “to” and “from” to define how the animation starts and ends. Here is the animation definition:

@keyframes change-color {
  from { color: red }
  to { color: blue }
}

Now, the animation needs to be registered to the text that you want to animate. The animation can be applied to the text just like any other CSS attribute using “animation-name”, while “animation-duration” can be used to set the length of the animation. In this example, I also made the text larger and set the color to be blue after the animation is complete. The animation can be applied as follows:

p {
  font-size: 36pt;
  color: blue;
  animation-name: change-color;
  animation-duration: 4s;
}

That’s it for making the text change color. If you want to make the text move, you can apply another animation. First of all, the position needs to be changed to absolute for the text by adding “position: absolute;” to the CSS. Otherwise, it would not be possible to set the text position. In this case, the text will move in a square. Instead of using “to” and “from” in the animation definition, you can set the animation at different percentages. Here is an example of what that looks like:

@keyframes square-movement {
  0% { top: 0px; left: 0px }
  25% { top: 0px; left: 200px }
  50% { top: 200px; left: 200px }
  75% { top: 200px; left: 0px }
  100% { top: 0px; left: 0px }
}

Now, to apply the new animation, you need to add it to the existing animation separated by a comma. The durations also need to be separated by a comma. So if you want to add the square movement animation and have it last 3 seconds, the CSS for the text would look like this:

p {
  position: absolute;
  font-size: 36pt;
  color: blue;
  animation-name: change-color, square-movement;
  animation-duration: 4s, 3s;
}

If you want the animation to loop, add animation-iteration-count: infinite; to the text style.

That’s all there is to it. This animation looks very basic, but the ideas can be applied to create more dynamic and interactive web pages. I wasn’t able to upload the file, so here is the source of the full webpage:

<html>
<head>
 <title>CSS Animation</title>
 <style type="text/css">
 @keyframes change-color {
 from { color: red }
 to { color: blue }
 }
 @keyframes square-movement {
 0% { top: 0px; left: 0px }
 25% { top: 0px; left: 200px }
 50% { top: 200px; left: 200px }
 75% { top: 200px; left: 0px }
 100% { top: 0px; left: 0px }
 }
 p {
 position: absolute;
 font-size: 36pt;
 color: blue;
 animation-name: square-movement, change-color;
 animation-duration: 3s, 4s;
 animation-iteration-count: infinite;
 }
 </style>
</head>
 <body>
 <p id="moving-text">Here is some text</p>
 </body>
</html>

Leave a Reply Cancel reply