7. Using Animation Keyframes Shortcuts
While probably not a good idea to do for beginner, you can delete the 0% and 100% keyframes and the animation will still work correctly from its initial CSS values.
(Changes from previous example are in blue and strike through.)
<!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 to create a HOLD keyframe (a keyframe that has the same start and end properties), create two keyframes with the different percentage values but the SAME keyframe properties separated by commas instead of having two lines. To create a hold at the start of an animation, use the animation-delay property instead.
5%, 35% {background: blue; -webkit-transfoms:translate(200px, 200px);}
When you have an animation at zero percent translation of zero, you can delete that keyframe safely and the CSS animation will use the EXISTING animation properties instead.