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>
Output:
Replay Animation
Download Code Files
Total Downloads: 762