CSSアニメーションがView Transitions APIで進化する！ パネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなデモ -Rediento

2023/07/26 32 users API CSSアニメーション デモ 実装 パネル

パネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わる、View Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Gro... 続きを読む

View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA

2023/05/10 87 users ICS MEDIA API入門 ウェブ Ｔｒａｎｓｉｔｉｏｎ

今年3月に公開されたChrome 111とEdge 111にView Transitons APIが搭載されました。View Transitons APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用... 続きを読む

View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す

2023/04/16 20 users API Next.js ページ遷移 最終成果 コード

はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇‍♂️ 今回実装した最終成果はこちらです。 また、コードはこち... 続きを読む

池田 泰延 on Twitter: "Chrome 111がリリースされました🎉 このバージョンには嬉しい新機能が盛りだくさんですが、もっとも注目したいのはView Transitions API。 ウェブのUIアニメーションにとって

2023/03/07 20 users API UIアニメーション 池田 画面遷移 ウェブ

Chrome 111がリリースされました🎉 このバージョンには嬉しい新機能が盛りだくさんですが、もっとも注目したいのはView Transitions API。 ウェブのUIアニメーションにとって、革命的な機能です。 画面遷移… https://t.co/jkh7za2e4W 続きを読む

Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する

2023/03/07 69 users API 概説 CSS 三角関数 観点

Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Tr... 続きを読む