CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。 実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。 CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。 サンプルはこちら 仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。 HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title
![CSS3のTransitionでダイナミックなページ遷移。 | Almondlab](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3e5060ec19e954cee71b90f9b87cc855faeeb9c/height=288;version=1;width=512/https%3A%2F%2Fwww.almondlab.jp%2Fwp-content%2Fthemes%2Falmondlab2019%2Fimages%2Fog-image-default.png)