Zenn
👌

よく使うアニメーションまとめ

2023/02/09に公開
CSS
jQuery
WordPress
tech

サイト制作を行う上で、簡単だけと結構よく使うアニメーションをここでまとめおきます！
基本的には自分が使う用に備忘録的に残していますが、使い回しはしやすいようにまとめていきますので、使えるところはどんどん使ってください👍

ボタンのホバー

これはデザインによって色々あるので、本当によくあるやつだけを抜粋しておきます！

■ホバーすると軽く透ける

● 付与するクラス名
・opa

cssの記述
.opa {
   transition: 0.3s;
}
.opa:hover {
   opacity: 0.7;
}

■左側の円がホバーでボタン全体を覆うようになる

● 付与するクラス名
・more_btn

cssの記述
.more_btn {
   position: relative;
   display: block;
   width: 128px;
   margin: auto;
   z-index: 3;
}
.more_btn::before {
   position: absolute;
   content: '';
   width: 50px;
   height: 50px;
   border-radius: 50px;
   top: 0;
   bottom: 0;
   left: -25px;
   z-index: -1;
   margin: auto;
   transition: .3s;
   background-color: #e5e5e5;
}
.more_btn:hover::before {
   width: calc(100% + 50px);
}
.more_btn::after {
   content: '';
   position: absolute;
   background-image: url(../img/top_new/icon_arrow.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   width: 5px;
   height: 10px;
   top: 2px;
   bottom: 0;
   right: 0;
   margin: auto;
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(100%) contrast(200%);
}

フェードイン

スクロールで画面が表示され次第、ふわっと表示されるアニメーションです。
クラス付与のみで使用可能です。
● 付与するクラス名
・fadeIn_one : 一回のみ下からフェードイン
・fadeIn : 下からフェードイン
・fadeLeft_one : 一回のみ左からフェードイン
・fadeRight_one : 一回のみ右からフェードイン

cssの記述
// フェードイン
.fadeIn {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s, transform 0.6s;
}

.fadeIn.is-inview {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.4s;
}

// フェードイン（一回のみ）
.fadeIn_one {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s, transform 0.6s;
}

.fadeIn_one.is-inview {
 opacity: 1;
 transform: translateY(0);
 transition-delay: 0.3s;
}

/* 左からフェードイン（一回のみ） */
.fadeLeft_one {
 opacity: 0;
 transform: translateX(-30px);
 transition: opacity 0.8s, transform 0.6s;
}
.fadeLeft_one.is-inview {
 opacity: 1;
 transform: translateX(0);
 transition-delay: 0.3s;
}

/* 右からフェードイン（一回のみ） */
.fadeRight_one {
 opacity: 0;
 transform: translateX(30px);
 transition: opacity 0.8s, transform 0.6s;
}
.fadeRight_one.is-inview {
 opacity: 1;
 transform: translateX(0);
 transition-delay: 0.3s;
}
jsの記述
// inview.jsを使用します
// フェードイン（一回のみ）
$(function () {
 $(".fadeIn_one").one("inview", function (event, isInView) {
   if (isInView) {
     $(this).addClass("is-inview");
   } else {
     $(this).removeClass("is-inview");
   }
 });
});

// フェードイン
$(function () {
 $(".fadeIn").on("inview", function (event, isInView) {
   if (isInView) {
     $(this).addClass("is-inview");
   } else {
     $(this).removeClass("is-inview");
   }
 });
});

// 左からフェードイン（一回のみ）
$(function () {
 $(".fadeLeft_one").one("inview", function (event, isInView) {
   if (isInView) {
     $(this).addClass("is-inview");
   } else {
     $(this).removeClass("is-inview");
   }
 });
});

// 右からフェードイン（一回のみ）
$(function () {
 $(".fadeRight_one").one("inview", function (event, isInView) {
   if (isInView) {
     $(this).addClass("is-inview");
   } else {
     $(this).removeClass("is-inview");
   }
 });
});

画像をぼかしからくっきり表示アニメーション

● 付与するクラス名
・blurImg

cssの記述
.blurImg {
 opacity: 0;
 transition: transform 0.5s linear;
 -webkit-animation-duration: 1.5s;
 animation-duration: 1.5s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.blurImg.is-blur {
 -webkit-animation-name: imageBlur;
 animation-name: imageBlur;
 opacity: 1;
 transition: 0.8s;
}

@-webkit-keyframes imageBlur {
 from {
   opacity: 0;
   -webkit-filter: blur(15px);
   -moz-filter: blur(15px);
   -ms-filter: blur(15px);
   -o-filter: blur(15px);
   filter: blur(15px);
 }

 to {
   opacity: 1;
   -webkit-filter: blur(0px);
   -moz-filter: blur(0px);
   -ms-filter: blur(0px);
   -o-filter: blur(0px);
   filter: blur(0px);
 }
}
@keyframes imageBlur {
 from {
   opacity: 0;
   -webkit-filter: blur(15px);
   -moz-filter: blur(15px);
   -ms-filter: blur(15px);
   -o-filter: blur(15px);
   filter: blur(15px);
 }

 to {
   opacity: 1;
   -webkit-filter: blur(0px);
   -moz-filter: blur(0px);
   -ms-filter: blur(0px);
   -o-filter: blur(0px);
   filter: blur(0px);
 }
}
jsの記述
// inview.jsを使用します
// ぼかしからくっきりへとアニメーション
$(function () {
 $(".blurImg").on("inview", function (event, isInView) {
   if (isInView) {
     $(this).addClass("is-blur");
   } else {
     //表示領域から出た時
   }
 });
});

1文字ずつ登場するテキストアニメーション（複数行対応）

メインビジュアルや見出しなどで使用することが多いです。
これはクラスではなく、data属性を付与してあげて使用しています。

// 「data-text-split」を付与してあげると動き出す
<p data-text-split>「モノ」を乗せて<br>「オモイ」を届ける。</p>
cssの記述
[data-text-wrap] {
display: inline-block;
}

[data-text-inner] {
display: block;
width: 0.001%;
overflow-x: hidden;
background-color: transparent;
}

@keyframes text {
0% {
  width: 0.001%;
}
100% {
  width: 100%;
}
}
jsの記述
$(window).on("load", () => {
$("[data-text-split]").each((index, element) => {
  const brSplitted = $(element).html().split("<br>");
  let mapped = [];
  brSplitted.forEach((item, index) => {
    const itemSplitted = item.split("");
    const brFormatted = itemSplitted.map((item) => {
      return `<span data-text-wrap><span data-text-inner>${item}</span></span>`;
    });
    mapped[index] = brFormatted.join("");
  });
  const result = mapped.join("<br>");
  $(element).html(result);

  const length = $(element).find("[data-text-wrap]").length;
  for (let i = 0; i < length; i++) {
    $(element)
      .find("[data-text-inner]")
      .eq(i)
      .css("animation", `text 30ms ${40 * i}ms forwards`);
  }
});
});

画像や文字を目隠ししてから表示アニメーション

表示されている画像やテキストに左から右に一度帯が前を通るような動きのアニメーションです。
（言葉で表現するのは難しい。。。）
● 付与するクラス名
・effect

cssの記述
.effect {
 position: relative;
 opacity: 0;
}

.effect.active {
 opacity: 1;
}

.effect::before {
 content: "";
 position: absolute;
 z-index: 1;
 top: 0%;
 right: 100%;
 bottom: 0%;
 left: 0%;
 background: #e95544;
}

.effect.active {
 animation-name: kf_c01a;
 animation-duration: 2s;
 animation-delay: 1.5s;
 animation-fill-mode: forwards;
 opacity: 1;
}

.effect.active::before {
 animation-name: kf_c01b;
 animation-duration: 2s;
 animation-fill-mode: forwards;
}

@keyframes kf_c01a {
 100% {
   color: inherit;
 }
}
@keyframes kf_c01b {
 50% {
   left: 0%;
   right: 0%;
 }
 100% {
   left: 100%;
   right: 0%;
 }
}
jsの記述
// inview.jsを使用します
$(function () {
 $(".effect").one("inview", function (event, isInView) {
   if (isInView) {
     $(this).addClass("active");
   } else {
     $(this).removeClass("active");
   }
 });
});

Discussion