Animation with CSS3

Lets create a very basic and simple animation in css. without using JavaScript or jQuery.

Replay Animation

CSS Code:

.canvas {
width: 650px;
height: 200px;
margin: 50px auto;
background: #fff;
position: relative;
overflow: hidden;
border:1px solid #666;
}

.canvas #ball {
width: 50px;
height: 50px;
background: #999;
position: relative;
border-radius: 50px;
top: 100px;
left : 595px;

animation-name: ball;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2.0s;

-moz-animation-name: ball;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 2.0s;

-ms-animation-name: ball;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 2.0s;

-o-animation-name: ball;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
-o-animation-duration: 2.0s;

-webkit-animation-name: ball;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 2.0s;

}

.canvas #ball2 {
width: 50px;
height: 50px;
background: #333;
position: relative;
border-radius: 50px;
top: 0px;
left : 5px;

-moz-animation-name: ball2;
-moz-animation-iteration-count: once;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 4.0s;

-webkit-animation-name: ball2;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 4.0s;

-o-animation-name: ball2;
-o-animation-iteration-count: once;
-o-animation-timing-function: ease-in;
-o-animation-duration: 4.0s;

-ms-animation-name: ball2;
-ms-animation-iteration-count: once;
-ms-animation-timing-function: ease-in;
-ms-animation-duration: 4.0s;

animation-name: ball2;
animation-iteration-count: once;
animation-timing-function: ease-in;
animation-duration: 4.0s; 
}


@keyframes ball{
0% {
transform: translateX(-600px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}

@-moz-keyframes ball{
0% {
-moz-transform: translateX(-600px);
opacity: 1;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}

@-webkit-keyframes ball{
0% {
-webkit-transform: translateX(-600px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}

@-ms-keyframes ball{
0% {
-ms-transform: translateX(-600px);
opacity: 1;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}

@-o-keyframes ball{
0% {
-o-transform: translateX(-600px);
opacity: 1;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}

@-moz-keyframes ball2{
0% {
-moz-transform: translateX(1200px);
opacity: 1;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}


@-webkit-keyframes ball2{
0% {
-webkit-transform: translateX(1200px);
opacity: 1;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}

@-o-keyframes ball2{
0% {
-o-transform: translateX(1200px);
opacity: 1;
}
100% {
-o-transform: translateX(0px);
opacity: 1;
}
}

@-ms-keyframes ball2{
0% {
-ms-transform: translateX(1200px);
opacity: 1;
}
100% {
-ms-transform: translateX(0px);
opacity: 1;
}
}

@keyframes ball2{
0% {
transform: translateX(1200px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}

HTML Code

<div class="canvas">
<div id="ball"> </div>
<div id="ball2"> </div>
</div>