【フリップ】画像をアニメーションで切り替えたい！オシャレに！【くるっと】

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

今回は【フリップ】でクルッと回転するアニメーションです。
実際の挙動は以下のようになります。

早速実装です！

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;
  transition: all .8s;
}

[data-is-animated="true"] [data-animate-number="1"],
[data-is-animated="false"] [data-animate-number="2"] {
  transform: rotateY(90deg) scale(0.9);
  transition-delay: 0s;
}

[data-is-animated="true"] [data-animate-number="2"],
[data-is-animated="false"] [data-animate-number="1"] {
  transform: rotateY(0deg) scale(1);
  transition-delay: .8s;
}

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

完成！

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

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

最後に

その他のアニメーション切り替え記事はこちら

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