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

画像をアニメーションで切り替えたい！オシャレに！ の詳細記事となります。 今回は【縦 横 斜めにスライドする】アニメーションです。 実際の挙動は以下のようになります。(以下は横にスライドする挙動です。) 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で、 切り替え前の