5. Using Multiple Animation Properties: To Add More Animation Behaviors To Moving Box
The example below will use multiple animation properties. (Changes from previous example are in blue. Beside the required animation-name and animation-duration, it is best to add one animation property at a time to see the effect more clearly.)
<!DOCTYPE html>
<html>
<head>
<style>
div{width:100px;height:100px;background:blue;
/*position:relative; this property is no longer need */
/* Chrome, Safari, Opera */
-webkit-animation-name: changeColorAndPosition;
-webkit-animation-duration:6s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name: changeColorAndPosition;
animation-duration:6s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@-webkit-keyframes changeColorAndPosition {
0% {background: red; -webkit-transforms: translate(0px,0px);}
25% {background: yellow; -webkit-transfoms:translate(200px,0px);}
50% {background: blue; -webkit-transfoms:translate(200px,200px);}
75% {background: green; -webkit-transfoms:translate(0px,200px);}
100% {background: red; -webkit-transfoms:translate(0px,0px);}
}
@keyframes changeColorAndPosition {
0% {background: red; -webkit-transforms: translate(0px,0px);}
25% {background: yellow; -webkit-transfoms:translate(200px,0px);}
50% {background: blue; -webkit-transfoms:translate(200px,200px);}
75% {background: green; -webkit-transfoms:translate(0px,200px);}
100% {background: red; -webkit-transfoms:translate(0px,0px);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>