css keyframes animation
//css keyframes
#image{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: monFrame 5s linear 2s infinite alternate;
}
@keyframes monFrame {
0% {left:0px; top:0px;}
25% {left:500px; top:0px;}
50% {left:500px; top:500px;}
75% {left:0px; top:500px;}
100% {left:0px; top:0px;}
} 
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div><p>you can add text in this box or anithing else like a pictrue</p></div>
</body>
</html>
//css keyframes
#image{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: monFrame 5s linear 2s infinite alternate;
}
@keyframes monFrame {
0% {left:0px; top:0px;}
25% {left:500px; top:0px;}
50% {left:500px; top:500px;}
75% {left:0px; top:500px;}
100% {left:0px; top:0px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
<style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
/*"Call" the animation "function" */
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
/* Normal, reverse, alternate(between the fwd and back)
and alternate-reverse */
animation-direction: reverse;
/* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
animation-timing-function: linear;
/* if you want something to display from hidden
set the opacity to 0 and in the keyframe steps bring
the opacity to 1 gradually to stop it flashing */
}
/* The animation "bounce" */
@keyframes bounce{
/* start */
0% {
top: 0px;
}
/* step (you can add multiple incremental steps from 1-100) */
50% {
top: 249px;
width: 130px;
height: 90px;
}
/* end (you can count down from 100 to 0 too) */
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
