Hadi Biraz Top sektirelim :)
<style>
#dis {
width:600px;
height:300px;}
#daire{
position:absolute;
background:green;
width:50px;
height:50px;
border-radius:50px;
animation-name:yatay, dusey;
-webkit-animation-name:yatay, dusey;
animation-duration:6s,3s;
-webkit-animation-duration:6s,3s;
animation-timing-function:ease-in-out, ease-in;
-webkit-animation-timing-function:ease-in-out, ease-in;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
@keyframes yatay{
0%{ left:0px;}
100%{ left:600px;}
}
@-webkit-keyframes yatay{
0%{ left:0px;}
100%{ left:600px;}
}
@keyframes dusey{
0%{ top:0px;}
20%{ top:40px;}
40%{ top:0px;}
60%{ top:160px;}
80%{ top:0px;}
100%{ top:250px;}
}
@-webkit-keyframes dusey{
0%{ top:0px;}
20%{ top:40px;}
40%{ top:0px;}
60%{ top:160px;}
80%{ top:0px;}
100%{ top:250px;}
}
</style>
<div id="dis">
<div id="daire"></div>
</div>