const animateFade = (entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.animate(
        {
          opacity: [0, 1],
          
          translate: ['0 4rem', 0],
        },
        {
          duration: 1000,
          easing: 'ease',
          fill: 'forwards',
        }
      );
      // 一度ふわっと表示されたら監視をやめる
      obs.unobserve(entry.target);
    }
  });
};

// 監視設定
const fadeObserver = new IntersectionObserver(animateFade);

// .fadeinを監視するよう指示
const fadeElements = document.querySelectorAll('.fade-in');
fadeElements.forEach((fadeElement) => {
  fadeObserver.observe(fadeElement);
});

.fade-in {
  opacity: 0;
}

<section class="section-contents" id="works">
	<div class="wrapper">
		<div class=" block--1"><div class="fontUp"><h2 class="section-title text-split">Works</h2></div></div>
        <span class="section-title-en fade-in">作品</span>
		<p class="section-lead fade-in">CMSWebサイトなどの紹介をします。</p>	
		<div class="workbox">
			<?php
				$custom_posts = get_posts(array(
					'post_type' => 'all_works',
					'posts_per_page' => 6,
				));
				global $post;
			?>
			<?php if($custom_posts): ?>
			<?php foreach($custom_posts as $post): setup_postdata($post); ?>	 
			<article class="works fade-in" >
				<div class="about-works-icon zoomIn">
					<a href="<?php echo esc_url(get_permalink()); ?>">
						<?php if(has_post_thumbnail()): ?>
                    		<?php the_post_thumbnail('medium_large'); ?>
                		<?php endif; ?>
					</a>
				</div>	
				<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">
              		<p class="title"><?php the_title(); ?></p>
              		<p class="news-text">
					<?php
        				$terms = get_the_terms($post->ID, 'kinds');
        				if ($terms) :
            				foreach ($terms as $term) {
                				echo '<span>' . $term->name . '</span>';
            				}
        				endif;
        			?>
					</p>
				</a>		
        	</article>
			<?php endforeach; ?>
			<?php endif; wp_reset_postdata(); ?>
		</div>
		<div class="fade-in">
           <button type="button" class="button button-ghost" onclick="javascript:location.href = '<?php echo home_url('/kinds'); ?>';">
            >> WORKS 一覧
           </button>
		</div>
	</div>
</section>