On Scroll Animation, where belongs the Threshold/Delay Property?

Question

I want to delay the Animation of the Elements, as they "flicker" when they intersect into Viewport but are only a bit visible. So i want to delay the Animation/Visibility of that Element untol its fully intersected. i tried already the treshold option but for some reason its not changing anything.

I tried following, but adding the threshold doesnt seem to change anything. I searched already the existing questions and also the web documentation of the intersectionObserver() but couldnt find the right answer. The intersection trigger at it self works so this isn't the issue. I also tried to delay the animation itself on CSS with the property "animation-delay:" but this didnt worked either. as soon as just one pixel of the element enters the viewport it's flickering. when you scroll up a bit more its acting as expected.

let options = {
  root: document.querySelector("#Career"),
  rootMargin: "0px",
  threshold: 1.0,
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
      return;
    }
    entry.target.classList.remove('active');
  });
});
const ContentRight = document.querySelectorAll('.content_right');
const ContentLeft = document.querySelectorAll('.content_left');
const PumkpinRight = document.querySelectorAll('.PumpkinMore_right');
const PumkpinLeft = document.querySelectorAll('.PumpkinMore_left');

ContentRight.forEach((element) => observer.observe(element));
ContentLeft.forEach((element) => observer.observe(element));
PumkpinRight.forEach((element) => observer.observe(element));
PumkpinLeft.forEach((element) => observer.observe(element));

.content_left.active {
  animation: enter_left 800ms ease 1;
}

.content_right.active {
  animation: enter_right 800ms ease 1;
}

.Details_right {
  z-index: 900;
  padding: 1rem;
  background-color: var(--accentGreen);
  min-width: 20rem;
  border-radius: 1rem;
  animation: Grow 1000ms ease 1;
}

.Details_left {
  z-index: 900;
  padding: 1rem;
  background-color: var(--accentGreen);
  min-width: 20rem;
  border-radius: 1rem;
  animation: GrowLeft 1000ms ease 1;
}

.PumpkinMore_left {
  //general options of size and positioning
}

.PumpkinMore_right {
  //general options of size and positioning
}

.PumpkinMore_right.active {
  animation: bounce_scale 1800ms ease 1;
}

.PumpkinMore_left.active {
  animation: bounce_scale 1800ms ease 1;
}

<h1 id="Career">Headline</h1>
<div class="timeline">
  <div class="container right">
    <div class="content_right">
      <h2>Headline</h2>
      <p>Description</p>
    </div>
    <div class="PumpkinMore_right">
      <p>Details</p>
    </div>
    <div class="Details_right hidden">Description</div>
  </div>
  <div class="container left">
    <div class="content_left">
      <h2>Headline</h2>
      <p>Description</p>
    </div>
    <div class="PumpkinMore_left">
      <p>Details</p>
    </div>
    <div class="Details_left hidden">Description</div>
  </div>