More than 1 year has passed since last update.

【スライド】画像をアニメーションで切り替えたい！オシャレに！【縦横斜め】

Last updated at 2022-01-24Posted at 2022-01-24

画像をアニメーションで切り替えたい！オシャレに！の詳細記事となります。

今回は【縦横斜めにスライドする】アニメーションです。
実際の挙動は以下のようになります。(以下は横にスライドする挙動です。)

CSSの mask-image を利用しての実装になります。
早速実装です！

1. HTMLの追加

<div class="animate js-animate" data-is-animated="false">
  <div class="animate_item" data-animate-number="1">
    <img src="image_1-1.jpg">
  </div>
  <div class="animate_item" data-animate-number="2">
    <img src="image_1-2.jpg">
  </div>
</div>

まずHTMLで、 切り替え前の画像 切り替え後の画像 を用意します。
それぞれ、上なのか下なのかがわかるようにdata属性を割り当てその外側にも状態管理用のdata属性を記載します。

image_1-1

image_1-2

2. CSSの追加

.animate {
  position: relative;
}

.animate_item {
  position: absolute;
}

[data-is-animated="true"] [data-animate-number="1"] img,
[data-is-animated="false"] [data-animate-number="2"] img {
  position: relative;
  z-index: 2;
  animation: slide-animation 0.6s;
  mask-image: linear-gradient(90deg,#000 0%,#000 0%,transparent 0%,transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 0%,transparent 0%,transparent 100%);
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  animation-fill-mode: forwards;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
}

[data-is-animated="true"] [data-animate-number="2"] img,
[data-is-animated="false"] [data-animate-number="1"] img {
  position: relative;
  z-index: 1;
  animation: inherit;
}

CSSではそれぞれの 切り替え前の画像 切り替え後の画像 に対して、表示するときのアニメーションなどの記載をします。

(slide-animation... どこに書いてあります...?)

@keyframes slide-animation {
  @for $i from 0 to 100 {
    $i% {
      mask-image: linear-gradient(90deg,#000 0%,#000 $i%,transparent $i%,transparent 100%);
      -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 $i%,transparent $i%,transparent 100%);
    }
  }
}

普通に書くと4行×100のとてつもないキーフレームを書くことになるので、postcssなど、CSSプリプロセッサを利用してeachやforで書くと良いと思います。