Sanu0074,
Для начала - очень грубый простой пример
<!DOCTYPE html >
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
@keyframes rotate {
from { top: 100px;
left: 400px;
height: 10px;
width: 10px}
12% { top: 100px;
left:470px;}
25% { top: 150px;
left:500px;
height: 50px;
width: 50px}
38% { top: 200px;
left:470px;}
50% { top: 200px;
left: 400px;
height: 100px;
width: 100px}
62% { top: 200px;
left:330px;}
75% { top: 150px;
left: 300px;
height: 50px;
width: 50px}
88% { top: 100px;
left:330px;}
to { top: 100px;
left: 400px;
height: 10px;
width: 10px}
}
.move
{ position: absolute;
animation: rotate 8s infinite linear;
}
</style>
<script>
$(document).ready(function () {
$('#i1').addClass('move');
setTimeout(function () { $('#i2').addClass('move') }, 2000);
setTimeout(function () { $('#i3').addClass('move') }, 4000);
setTimeout(function () { $('#i4').addClass('move') }, 6000)
});
</script>
</head>
<body>
<img id="i1" src="http://javascript.ru/cat/list/event.gif" >
<img id="i2" src="http://javascript.ru/cat/list/dom.gif" >
<img id="i3" src="http://javascript.ru/cat/list/mobile.jpg" >
<img id="i4" src="http://javascript.ru/cat/list/donkey.gif" >
</body>
</html>