【斜め】画像をアニメーションで切り替えたい！オシャレに！【グリッド】

[画像をアニメーションで切り替えたい！オシャレに！](https://qiita.com/drooooopp/items/5d7ef537461ae3f23c3b) の詳細記事となります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/ca764c62-8410-f5de-f920-739f48251e17.gif" width="300">

今回は【斜めのグリッド】でのアニメーションです。
実際の挙動は以下のようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/20cec084-de9d-e1c6-66c3-29fa4d9fd149.gif" width="300">

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

## 1. HTMLの追加

```{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-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/51fb059b-673f-6cec-e9c4-116b7152dae1.jpeg)

**image_1-2**
![image_1-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/cbe4a0f6-f8e8-8b36-dedd-193d57b6d1ed.jpeg)


## 2. CSSの追加

```{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;
  mask-image: repeating-linear-gradient(45deg,
  transparent,
  transparent 0,
  black 20px,
  black 20px);
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  animation: wipe-animation 0.6s;
  animation-fill-mode: forwards;
  -webkit-mask-image: repeating-linear-gradient(45deg,
  transparent,
  transparent 0,
  black 20px,
  black 20px);
  -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;
}

@keyframes wipe-animation {
  0% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 20px);
  }
  5% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 19px,
    black 19px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 19px,
    black 19px,
    black 20px);
  }
  10% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 18px,
    black 18px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 18px,
    black 18px,
    black 20px);
  }
  15% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 17px,
    black 17px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 17px,
    black 17px,
    black 20px);
  }
  20% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 16px,
    black 16px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 16px,
    black 16px,
    black 20px);
  }
  25% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 15px,
    black 15px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 15px,
    black 15px,
    black 20px);
  }
  30% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 14px,
    black 14px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 14px,
    black 14px,
    black 20px);
  }
  35% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 13px,
    black 13px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 13px,
    black 13px,
    black 20px);
  }
  40% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 12px,
    black 12px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 12px,
    black 12px,
    black 20px);
  }
  45% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 11px,
    black 11px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 11px,
    black 11px,
    black 20px);
  }
  50% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 10px,
    black 10px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 10px,
    black 10px,
    black 20px);
  }
  55% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 9px,
    black 9px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 9px,
    black 9px,
    black 20px);
  }
  60% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 8px,
    black 8px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 8px,
    black 8px,
    black 20px);
  }
  65% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 7px,
    black 7px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 7px,
    black 7px,
    black 20px);
  }
  70% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 6px,
    black 6px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 6px,
    black 6px,
    black 20px);
  }
  75% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 5px,
    black 5px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 5px,
    black 5px,
    black 20px);
  }
  80% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 4px,
    black 4px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 4px,
    black 4px,
    black 20px);
  }
  85% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 3px,
    black 3px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 3px,
    black 3px,
    black 20px);
  }
  90% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 2px,
    black 2px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 2px,
    black 2px,
    black 20px);
  }
  95% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 1px,
    black 1px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 1px,
    black 1px,
    black 20px);
  }
  100% {
    mask-image:repeating-linear-gradient(45deg,
    transparent,
    transparent 0px,
    black 0px,
    black 20px);
    -webkit-mask-image: repeating-linear-gradient(45deg,
    transparent,
    transparent 0px,
    black 0px,
    black 20px);
  }
}
```

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

### (wipe-animation... 長すぎません...?)
そう思います。
postcssなど、CSSプリプロセッサを利用してeachやforで書くと良いかもしれません。


## 完成！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116793/b9c406fa-1c60-9f00-5701-41b3427443c2.gif" width="200">

画像を可愛い猫にしてみました。
こんなにオシャレに！（猫がかわいい）画像切り替えが！（うちの子なんです...）簡単に！（かわいいですよねぇ）できちゃいました！（世界一かわ...）

あとは必要に応じてCSSでのレイアウトや、JavaScriptでのタイミングを調整すれば色々な見せ方ができると思います。

## 最後に
[mask-position | Can I use...](https://caniuse.com/mdn-css_properties_mask-position)
実案件で利用できるかは上記を踏まえてご利用ください。

### その他のアニメーション切り替え記事はこちら
[【ブラシ】画像をアニメーションで切り替えたい！オシャレに！【塗りつぶし】](https://qiita.com/drooooopp/items/58ae4baeb863e52e64ce)
[【スライド】画像をアニメーションで切り替えたい！オシャレに！【縦 横 斜め】](https://qiita.com/drooooopp/items/94eb6f8e1e5009ab75d9)
[【フリップ】画像をアニメーションで切り替えたい！オシャレに！【くるっと】](https://qiita.com/drooooopp/items/586813b06591af3ef37b)