Animations

1. Animation: Left-Right

@-webkit-keyframes 'leftright' {
0% {margin-left: 0px; animation-timing-function: ease-out;}
40% {margin-left: 100px; animation-timing-function: ease-in;}
100% {margin-left: 0px; animation-timing-function: ease-out;}
}
.doleftright {
-webkit-animation-name: leftright;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

2. Animation: Box

@-webkit-keyframes 'box' {
0% {margin-top: 0px;}
25% {margin-top: 100px;}
50% {margin-top: 100px; margin-left:100px;}
75% {margin-top: 0px; margin-left:100px;}
100% {margin-top: 0px; }
}
.dobox {
-webkit-animation-name: box;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-delay:1s;
}

3. Animation: Bounce

@-webkit-keyframes 'bounce' {
0% {margin-top: 0px;}
20% {margin-top: 200px;}
40% {margin-top: 100px;}
60% {margin-top: 200px;}
80% {margin-top: 160px;}
100% {margin-top: 200px;}
}
.dobounce {
-webkit-animation-name: bounce;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 6;
-webkit-animation-direction: alternate;
-webkit-animation-delay:0;
}