1. Using “From” and “To” Keywords: To Change Color
The example below will change the color of the box from blue to green in 6 seconds.
<!DOCTYPE html>
<html>
<head>
<style>
div{width:100px;height:100px;background:blue;
-webkit-animation-name: changeColor;
-webkit-animation-duration: 6s;
animation-name:changeColor;
animation-duration: 6s;
}
@-webkit-keyframes changeColor {
from {background:blue;}
to {background:green;}
}
@keyframes changeColor {
from {background:blue;}
to {background:green;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
NOTES:
- Notice we will typically start the class definitions with regular CSS properties (i.e., width:100px;height:100px;background:blue;) and then add CSS animation properties (i.e., -webkit-animation-name: changeColor; ,etc.) all within the <style> tag.
- When an animation is finished, it changes back to its original CSS property (i.e., background color) or properties (i.e., background color and width). For example, if you change the previous keyframes to:
from {background:blue; width:200px;}
to {background:green; width:300px;}
The blue box with “pop” to 200px (from its original 100px) and “grow” to 300px and then “pop” back to its original 100px when the animation is complete. We will see later how to prevent the animation from going back to its original CSS properties. - Notice that all of the keyframe rules have a “@” in front of them.
- Using the keywords “from” and “to” limit you to only two keyframes. We will see in the next example if you use percentages, you can have a multitude of keyframes.
- Add multiple animation properties (name/value pairs) as the same as adding any CSS rules by separating them with semicolons (;).