如何让CSS动画在滚动到对应区块时触发而非页面加载时？

Got it, let's get this sorted so your fade-in animation only fires when those odd slick slides scroll into view, not right when the page loads. Here's a clean, modern approach using the Intersection Observer API (way better than old scroll event listeners for performance):

Step 1: Restructure Your CSS #

First, we'll separate the initial "hidden" state from the animation trigger. This way, the animation only runs when we explicitly add a class to the element.

/* Initial state: keep elements hidden until animation triggers */
.slick-slide:nth-child(odd) {
  opacity: 0;
  transform: translateX(-10px);
  /* Add vendor prefixes if you need to support older browsers */
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -o-transform: translateX(-10px);
}

/* Animation class: this is what triggers the fade-in */
.slick-slide:nth-child(odd).animate-fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
  /* Critical: keep the final state after animation ends */
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
}

/* Clean up your keyframes (fixed inconsistent translateX values) */
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    -moz-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Step 2: Add Intersection Observer JavaScript #

This script will watch when your target slides enter the viewport, then add the animation class to trigger the fade-in.

// Grab all the odd slick slides we want to animate
const animatedSlides = document.querySelectorAll('.slick-slide:nth-child(odd)');

// Configure the observer (adjust threshold if you want to trigger earlier/later)
const observerConfig = {
  root: null, // Use the viewport as the root
  rootMargin: '0px',
  threshold: 0.1 // Trigger when 10% of the slide is visible
};

// Create the observer instance
const slideObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Add the animation class to trigger the fade-in
      entry.target.classList.add('animate-fadeInLeft');
      // Stop observing this slide so it only animates once
      observer.unobserve(entry.target);
    }
  });
}, observerConfig);

// Start observing each slide
animatedSlides.forEach(slide => {
  slideObserver.observe(slide);
});

Key Notes: #

• animation-fill-mode: forwards: This ensures the slide stays visible (opacity: 1, no transform) after the animation finishes—without it, it would snap back to the hidden state.
• Consistent keyframe values: I fixed the inconsistent -10px vs -100px in your original keyframes to make the animation smooth and predictable.
• Performance: Intersection Observer is far more efficient than listening to the scroll event, which fires constantly and can cause jank on slower devices.

内容的提问来源于stack exchange，提问作者user979331