4. Using the Translate Properties: To Move Box
The example below will change the color and animate the translation properties of the box. In the previous example you use the position properties to animate the box. Here we will use CSS animation properties of translate(x,y) which will give you better performance. It is best to use Left /Top for positioning objects and translate(x,y) for moving objects. (Changes from previous example are in blue.)
<!DOCTYPE html>
<html>
<head>
<style>
div{width:100px;height:100px;background:blue;
/*position:relative; this property is no longer need */
-webkit-animation-name: changeColorAndPosition;
-webkit-animation-duration: 6s;
animation-name: changeColorAndPosition;
animation-duration: 6s;
}
@-webkit-keyframes changeColorAndPosition {
0% {background: red; -webkit-transform:translate(0px,0px);}
25% {background: yellow; -webkit-transform:translate(200px,0px);}
50% {background: blue; -webkit-transform:translate(200px,200px);}
75% {background: green; -webkit-transform:translate(0px,200px);}
100% {background: red; -webkit-transform:translate(0px,0px);}
}
@keyframes changeColorAndPosition {
0% {background: red; -webkit-transform:translate(0px,0px);}
25% {background: yellow; -webkit-transform:translate(200px,0px);}
50% {background: blue; -webkit-transform:translate(200px,200px);}
75% {background: green; -webkit-transform:translate(0px,200px);}
100% {background: red; -webkit-transform:translate(0px,0px);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
NOTE: When creating an object that needs to move using the CSS translate property you no longer need the CSS position property.
NOTE: Don’t forget to add the unit of measurement (i.e., px) to the end of the translate values; otherwise, animation will not work.