皆さん、こんにちは。
制作部の関です。
今回は「View Transition API」についてのお話をします。
【CSS・JS】手軽にページ遷移アニメーション！View Transition APIとは
View Transitions APIとは、異なるDOM要素間のアニメーション化されたトランジションを簡単な記述だけで作成することができるメカニズムのことです。
要約すると他のライブラリー等を使用することなく、滑らかな画像イメージの切り替えができるようになるのが、View Transitions APIです。
トランジション（Transition）とは、直訳すると推移、移行、変遷となり、IT用語としては、Webページなどのページ遷移の際に用いられる演出効果のことを指しています。トランジションは、画像と画像を切り替える際に滑らかな切り替わり効果だけではなく、波紋効果やワイプなど様々効果を加えた遷移（手法）が用いられています。
いくつか簡単なDEMOを作りましたので、よかったら参考にしてください。
See the Pen
View Transition API01 by seki (@separth10)
on CodePen.
See the Pen
View Transition API02 by seki (@separth10)
on CodePen.
See the Pen
View Transition API03 by seki (@separth10)
on CodePen.
See the Pen
Untitled by seki (@separth10)
on CodePen.
参考サイトはこちらになります
<!–参考サイト
https://ics.media/entry/230510/
–>
以上、制作部の関でした。