3. Using the Position Properties: To Move Box
The example below will change the color and animate the position of the box. (Changes from previous example are in blue.)
<!DOCTYPE html>
<html>
<head>
<style>
div{width:100px;height:100px;background:blue;
position:relative;
-webkit-animation-name: changeColorAndPosition;
-webkit-animation-duration: 6s;
animation-name: changeColorAndPosition;
animation-duration: 6s;
}
@-webkit-keyframes changeColorAndPosition {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@keyframes changeColorAndPosition {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
NOTE: When creating an object that needs to move, notice that the position property is set to relative which means that is will move relative to and within its parent container. If you were to set it to absolute, it would move from the <body> container at the top/left corner of the browser (x=0 and y=0).
NOTE: Here we use CSS properties “Left” and “Top” to move the object. You will see in the next example how to animate using the CSS translation properties.
NOTE: Notice that you can animate MULTIPLE properties by separating them with semicolon (;) like you do with any CSS properties.