タイトルのとおりです。
最近たまにみかけるタイトルとか画像とかにスタイルを加えるだけでスクロール表示されたときに一瞬だけシュッてスライドインで表示されてそのままスライドアウトされるやつをCSSで再現したかった。

日本語のオノマトペは言語化がとても難しい。

html

<h2 class="stylish-slide-in">
タイトルが入るやつ
</h2>

<div class="stylish-slide-in">
	<picture>
		<source srcset="/wp-content/themes/asairo-design/img/no-image.webp" type="image/webp">
		<img src="/wp-content/themes/asairo-design/img/no-image.jpg">
	</picture>
</div>

CSS

.stylish-slide-in {
  position: relative;
  display: inline-block;
}

.stylish-slide-in::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(237, 96, 75, 1.0);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.stylish-slide-in.is-animated::before {
  animation: slideFade 0.5s ease-in-out forwards;
}

@keyframes slideFade {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  30% {
    transform: translateX(0);
    opacity: 1;
  }
  70% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

Javascript

document.addEventListener('DOMContentLoaded', function() {
  const targets = document.querySelectorAll('.stylish-slide-in');

  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.2 // 20% 画面に入ったら発火
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 画面内に入ったらクラスを付与
        entry.target.classList.add('is-animated');
        // 一度発火したら監視を解除する場合
        observer.unobserve(entry.target);
      }
    });
  }, options);

  targets.forEach(target => {
    observer.observe(target);
  });
});