Ok So How Do I make A Function To Check If an anim

Ok so I know the title is nonsense buT how do i check if the obstacle passes a certain point and active a function because of It?

Here is my code so far

function jump() {
  jumpDetect = false;
  document.getElementById("body").classList.toggle("body");
  document.getElementById("beak").classList.toggle("beak");
  document.getElementById("eyes").classList.toggle("eyes");
  document.getElementById("pupils").classList.toggle("pupils");
  document.getElementById("tail").classList.toggle("tail");
  document.getElementById("snood").classList.toggle("snood");
  document.getElementById("legRight").classList.toggle("legRight");
  document.getElementById("legLeft").classList.toggle("legLeft");
  setTimeout(() => {
    document.getElementById("body").classList.toggle("body");
    document.getElementById("beak").classList.toggle("beak");
    document.getElementById("eyes").classList.toggle("eyes");
    document.getElementById("pupils").classList.toggle("pupils");
    document.getElementById("tail").classList.toggle("tail");
    document.getElementById("snood").classList.toggle("snood");
    document.getElementById("legRight").classList.toggle("legRight");
    document.getElementById("legLeft").classList.toggle("legLeft");
  }, 0);
  winDetection();
}
function winDetection() {
  jumpDetect = true;
  console.log(jumpDetect)
}

.body {
  padding: 30px 30px;
  height: 35px;
  width: 5px;
  border-radius: 50%;
  background-color: brown;
  position: relative;
  top: 0px;
  animation-name: turkey;
  animation-duration: 1s;
}
.beak {
  padding: 1px 1px;
  width: 1px;
  height: 1px;
  border-top: 10px solid transparent;
  border-left: 25px solid #ffc800;
  border-bottom: 5px solid transparent;
  position: relative;
  left: 40px;
  top: 40px;
  animation-name: beak;
  animation-duration: 1s;
}
.eyes {
  padding: 10px 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: -80px;
  animation-name: eyes;
  animation-duration: 1s;
}
.pupils {
  padding: 5px 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: black;
  position: relative;
  top: -100px;
  animation-name: pupils;
  animation-duration: 1s;
}
.snood {
  padding: 5px 5px;
  width: 1px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: -254px;
  right: -38px;
  animation-name: snood;
  animation-duration: 1s;
}
.legRight {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -219px;
  right: 9px;
  transform: rotate(30deg);
  animation-name: legRight;
  animation-duration: 1s;
}
.legLeft {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -242px;
  left: 3px;
  transform: rotate(30deg);
  animation-name: legLeft;
  animation-duration: 1s;
}
.obstacle {
  height: 100px;
  width: 10px;
  background-color: black;
  animation: obstacle 3s infinite;
  position: relative;
  top: -460px;
}
body {
  background-color: lightblue;
}

<html>

<head>
</head>

<body>
  <center>
    <br><br><br><br><br><br>
    <div class="turkey">

      <div id="beak" class="turkey beak"></div>

      <div id="body" class="turkey body"></div>

      <div id="eyes" class="turkey eyes"></div>
      <div id="pupils" class="turkey pupils"></div>
      <style>
        .tail {
          width: 20px;
          height: 150px;
          border-radius: 50%;
          background-color: brown;
          position: relative;
          top: -200px;
          right: 59px;
          transform: rotate(-30deg);
          animation-name: tail;
          animation-duration: 1s;
        }
      </style>
      <div id="tail" class="turkey tail" id="tailId"></div>
      <div id="snood" class="turkey snood"></div>
      <div id="legRight" class="turkey legRight"></div>
      <div id="legLeft" class="turkey legLeft"></div>
    </div>
    <style>
      @keyframes turkey {
        0% {
          top: 0px;
        }
        50% {
          top: -200px;
        }
        100% {
          top: 0px;
        }
      }

      @keyframes beak {
        0% {
          top: 40px;
        }
        50% {
          top: -160px;
        }
        100% {
          top: 40px;
        }
      }

      @keyframes eyes {
        0% {
          top: -80px;
        }
        50% {
          top: -280px;
        }
        100% {
          top: -80px;
        }
      }

      @keyframes pupils {
        0% {
          top: -100px;
        }
        50% {
          top: -300px;
        }
        100% {
          top: -100px
        }
      }

      @keyframes snood {
        0% {
          top: -254px;
        }
        50% {
          top: -450px;
        }
        100% {
          top: -254px;
        }
      }

      @keyframes legRight {
        0% {
          top: -219px;
        }
        50% {
          top: -419px;
        }
        100% {
          top: -219px;
        }
      }

      @keyframes legLeft {
        0% {
          top: -242px;
        }
        50% {
          top: -442px;
        }
        100% {
          top: -242px;
        }
      }

      @keyframes tail {
        0% {
          top: -200px;
        }
        50% {
          top: -400px;
        }
        100% {
          top: -200px;
        }
      }
    </style>
    <style>
      .button {
        height: 100px;
        width: 100px;
        background-color: red;
        border-radius: 50%;
        position: relative;
        top: -210px;
        overflow=scroll;
      }
    </style>
    <div class="button" onclick="jump()">
      <h1>JUMP</h1>
    </div>
    <div class="obstacle"></div>
    <style>
      @keyframes obstacle {
        from {
          left: 1000px;
        }
        to {
          left: -870px;
        }
      }
    </style>

  </center>
</body>

</html>

Btw a snood is the turkey's thing under its beak. So to restate the question, How do i detect if the obstacle passes the turkey and see if the turkey jumps or not? Thanks

your code is a real mess. First, do not mix the html code and the css code. Each has its place. and more ... argh!

var
  my_Turkey = document.getElementById('the_turkey'),
  DetectAnimationEnding = 'webkitAnimationEnd oAnimationEnd oanimationend msAnimationEnd animationend'
;

DetectAnimationEnding.split(' ')
.forEach(function(elem) {
    my_Turkey.addEventListener(elem, function() {
        my_Turkey.className = "";
    });
});

Mybutton.onclick = function () {
  my_Turkey.className = "jump";
}

body { background-color: lightblue; }
* {  margin: 0;  padding: 0; border: 0; }

#the_turkey {
  position: relative;
  width :160px;
  height: 160px;
  margin: 220px auto 0 auto;
  animation-duration: 1s;
}
#the_turkey.jump {
  animation-name: turkey;
}

#the_turkey > div {
  position: absolute;
}

#corpus  {
  top: 0;
  left :40px;
  width : 65px;
  border-radius: 50%;
  background-color: brown;
  height: 95px;
}
#beak {
  left: 100px;
  top: 20px;
  padding: 1px 1px;
  width: 1px;
  height: 1px;
  border-top: 10px solid transparent;
  border-left: 25px solid #ffc800;
  border-bottom: 5px solid transparent;
}

@keyframes turkey {
  0%   { top: 0px; }
  50%  { top: -200px; }
  100% { top: 0px; }
}
#Mybutton {
  margin: 10px auto 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  overflow: hidden;
}
#Mybutton>h2 {
  text-align: center;
  width: 100%;
  margin-top: 35px;
}

<div id="the_turkey">
    <div id="corpus" ></div>
    <div id="beak"  ></div>
    <!--
    <div id="eyes"    ></div>
    <div id="pupils"  ></div>
    <div id="tail"     ></div>
    <div id="snood"    ></div>
    <div id="legRight" ></div>
    <div id="legLeft"  ></div>
    -->
</div>

<div id="Mybutton" >
    <h2>JUMP</h2>
</div>