6. Using Animation Properties Shortcuts
The same animation effect as the previous example (except the animation-play-state property) but uses the shorthand animation property. (Changes from previous example are in blue.). The order does not matter except when using duration and delay, they need to be in that order.
SYNTAX: animation: name duration timing_function delay interaction_count direction;
<!DOCTYPE html>
<html>
<head>
<style>
div{width:100px;height:100px;background:blue;
/* Chrome, Safari, Opera */
-webkit-animation: changeColorAndPosition 5s linear 2s infinite alternate;
/* Standard syntax */
animation: changeColorAndPosition 5s linear 2s infinite alternate;
}
@-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>
NOTE: Like CSS properties like border is used by itself, you can specify all of the value in one line.