有没有办法防止我的CSS关键帧动画开始，直到该元素滚动到视图中？

// 创建一个Intersection Observer对象
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，添加CSS类来开始动画
      entry.target.classList.add('animate');
    } else {
      // 元素离开视口，移除CSS类来停止动画
      entry.target.classList.remove('animate');
    }
  });
});

// 监测需要控制动画的元素
const element = document.querySelector('.animated-element');
observer.observe(element);

.animated-element {
  opacity: 0; /* 初始状态 */
  transition: opacity 0.5s; /* 过渡效果 */
}

.animated-element.animate {
  opacity: 1; /* 动画开始状态 */
}