Untitled

<!DOCTYPE html>
<html>
<style>
#container {
  width: 1350px;
  height: 600px;
  position: relative;
  background-color:#B2ABAB;
}
#container2 {
  width: 555px;
  height: 640px;
  position: absolute;
            top:325px;
            left:450px;
  background-image: url(dabouza.png);
  background-repeat: no-repeat;
}

#animate {
  width: 300px;
  height: 1000px;
  position: absolute;
  background-image: url(abbb.png);
  background-repeat: no-repeat;
}
 #animate2 {
  width: 600px;
  height: 600px;
  position: absolute;
  background-image: url(logo.png);
  background-repeat: no-repeat;
}


</style>
<body>

<p>
<button onclick="myMove()">NOW</button>
</p>

<div id ="container">
<div id ="container2">
<div id ="animate"></div>
<div id ="animate2"></div>

</div>

<script>


function all() {
var first=setTimeout(myMove,0);
firstt=setInterval(myMove,5000);
alerte("first est bon");
clearTimeout(first);
clearInterval(firstt);

var second=setTimeout(myMovee,6000);
secondd=setInterval(myMovee,3000);
clearTimeout(second);
clearInterval(secondd);
alerte("second est bon");


function myMove() {
  var elem = document.getElementById("animate");
  var posx = 325;
  var posy = 450;
  var id = setInterval(frame,1);
  var dir = -1;


 function frame() {
    posx += dir;
    if (posx > 150) {
      dir = -1;
	  sleep(2000);
    } else if (posx < 250) {
        dir = 1;

    }
    if (posy == -1100) {
      posy = 400;
    } else {
      posy--;
      elem.style.top = posy + 'px';
      elem.style.left = posx + 'px';

    }}

function myMovee() {
  var elem = document.getElementById("animate");
  var pos = -100;
  var id = setInterval(framee, -30000);
  elem.style.top = 400 + 'px';

 function framee() {
    if (pos == 300) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.left = pos + 'px';
    }
  }
}


}}

</script>

</body>
</html>