ちょっとだけCSSアニメーションを追加したい時

やりたいこと

• サイトにアニメーションを追加したい
• がっつりじゃなく、ちょっとだけ
• スクロールしたらフワッと出てくる
• サクッと追加したい（ファイル追加とかしないで、既存のコードに追加くらいで済ませたい）

CSSアニメーションでサクッとやる

かんたんなアニメーションなら、Animistaで使いたいコードをコピペしてくる。
https://animista.net/

下からフワッと上がってくる＆フェードインならこんな感じ

style.css

/*

animation List
from : https://animista.net/

*/

.site-content .setAnime{
	opacity: 0;
}
.site-content .is-animate.slide-in-down {
	-webkit-animation: slide-in-down 1s ease-in-out both;
	        animation: slide-in-down 1s ease-in-out both;
}
.site-content .is-animate.fade-in {
	-webkit-animation: fade-in 1s ease-in-out both;
	        animation: fade-in 1s ease-in-out both;
}

/*
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}
@keyframes fade-in {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}

/*
 * ----------------------------------------
 * animation slide-in-down
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-down {
  0% {
	  opacity: 0;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
	  opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-in-down {
  0% {
	  opacity: 0;
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
  100% {
	  opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

class="is-animate slide-in-down"を追加すれば、表示と同時にアニメーションする。

スクロールしたら動くようにしたい

スクロールをトリガーにしたい場合は、以下のコードをページ内に追加。

index.html

<script type="text/javascript">
const myFunc = function(){
	//Classを追加する要素を取得
	const target = document.getElementsByClassName('setAnime');
	//Classを追加する位置を指定（ビューポート内）
	const position = Math.floor(window.innerHeight * .75); //ビューポート内の上から75%の位置を指定
	//要素の数だけループする
	for (let i = 0; i < target.length; i++) {
		//要素の上部座標を取得する（小数点切り捨て）
		let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
		//要素の上部座標がpositionの位置を通過したら
		if (offsetTop < position) {
			//要素にClassを追加する
			target[i].classList.add('is-animate');
		}
	}
}
//スクロールイベントリスナーに登録
window.addEventListener('scroll', myFunc, false);
</script>

WordPressならカスタムHTMLブロックとかで追加してもいい。

スクロールトリガーの場合、class="setAnime slide-in-down"を追加。
表示領域に入ったら「setAnime」が付いた要素に「is-animate」が付くので、そこでアニメーションする。

setAnimeにopacity: 0;入れてるのは、フェードイン系は最初に透明にしておかないと、アニメーション発動直前に表示されちゃうから。

たまに使うけど、忘れちゃうのでメモ。