TransformjQueryを使ったアニメーションではCSSのプロパティ値を操作することによってページ上に様々なバリエーションのアニメーションを簡単に実装することが可能になりますが現状(ver.1.8)のデフォルト状態でのjQueryファイルではCSS3のTransform系の回転「rotate」や拡大縮小「scale」といったアニメーション値を操作することはできません。そんなCSS3のTransform関連のプロパティ値をjQueryアニメーションとして操作させることを可能とするプラグインがいくつかあったので使いやすかったものをサンプルアニメーションを交えて紹介してみます。jquery-animate-css-rotate-scale.jsjQueryでCSS3のTransformアニメーションを操作させるプラグインはいくつかありますがその中でも使いやすかったものとして「jquery-css-transform.js」と「jquery-animate-css-rotate-scale.js」のこの2つのプラグインファイルを組み合わせて使うことでとても簡単にTransformアニメーションを実装することができました。scale(2)'}).animate({rotate:'0deg',scale:'1'},1000,'linear');この様に、CSS値で「transfrom」の値をセットして「.animate()」アニメーションで値を変化させることで操作させることが可能になります。これらのプラグインを使って試に作ってみた簡単なCSSアニメーションサンプルをいくつか紹介してみます。※もちろんCSS3非対応ブラウザでは動作しません。サンプルのHTML/CSSはすべて以下の共通のものを使用します。hidden;}まずは単純な「scale」の値を操作したズームアニメーションパターン。※下記画面の「START」を押してみてください。残念ながら先日公開されたFirefox16以降はこのプラグインは使用できなくなっているもようです。Firefoxでの正常な動作は16以前のバージョンでご確認いただけます...「scale」サンプルを別枠で表示する※別枠表示ではオープニングムービー風にしてアニメーション終了後は当ブログへリンクします。この「scale」アニメーション動作のスクリプトは以下の様な書き方になっています。値を変化させています。次に、「scale」+「rotate」の値を操作したズーム&回転アニメーションパターン。※下記画面の「START」を押してみてください。「scale」+「rotate」サンプルを別枠で表示するこの「scale」+「rotate」アニメーション動作のスクリプトは以下の様な書き方になっています。値を変化させています。拡大/縮小や回転といったCSSアニメーションをjQueryアニメーションで手軽に実装できるようになります。なっており、IE9でもちゃんと正常に動作しています。※Firefoxは「3.5+」となっていますが、残念ながら先日公開されたFirefox16以降は接頭語の有無の関係からか、このプラグインは正常に動作しなくなってしまっているようです。これら2つのプラグインはとても使いやすく便利なのですが残念ながら「rotateX」や「rotateY」といったX軸/Y軸の値を操作したアニメーションには対応していないようなので「rotateX」や「rotateY」を使ったアニメーションを組み込む場合にはまったく別のプラグインを使う必要があります。続いては「rotateX」や「rotateY」のアニメーションにも対応しているプラグイン。jquery.transform.js・jquery.transform.jseenox/jQuery-3D-transform・GitHubこちらのプラグインでは◆SCRIPT$(●●●●).transform({rotateZ:'360deg',scale:'2'}).animate({rotateZ:'0deg',scale:'1'},1000,'linear');この様に、transform値をメソッドとしてセットして.animateアニメーションで変化させる値をセットすることで操作させることが簡単に可能になっているようです。こちらのプラグインを使って試に作ってみた簡単なCSSアニメーションサンプルもいくつか紹介してみます。(HTML/CSSは一つ目に紹介したものと同じです)まずは「rotateX」や「rotateY」の値を操作したアニメーション※下記画面の「START」を押してみてください。「rotateX」+「rotateY」サンプルを別枠で表示するこの「rotateX」+「rotateY」アニメーション動作のスクリプトは以下の様な書き方になっています。値を変化させています。次に、一つ目に紹介したものと同じくこちらのプラグインを使って同様に「scale」の値を操作したズームアニメーションパターン。※下記画面の「START」を押してみてください。「scale」サンプルを別枠で表示するこの「scale」アニメーション動作のスクリプトは以下の様な書き方になっています。値を変化させています。最後に一つ目に紹介したものと同じくこちらのプラグインを使って同様に「scale」+「rotate」の値を操作したズーム&回転アニメーションパターン。※下記画面の「START」を押してみてください。「scale」+「rotate」サンプルを別枠で表示するこの「scale」+「rotate」アニメーション動作のスクリプトは以下の様な書き方になっています。値を変化させています。拡大/縮小や回転といったCSSアニメーションに加えてこちらでは「rotateX」や「rotateY」のX軸/Y軸の値を操作したアニメーションも手軽に実装できるようになります。残念ながら「rotateX」や「rotateY」の回転などを使ったアニメーションはIE9が非対応になっています。jQueryのバージョンも「1.8系」では動作しなかったので「1.7.2」までのバージョンで実装する必要があります。以上、2通りのjQueryアニメーションでCSS3のTransformを実装させるプラグインの紹介でした。これらをjQueryで制御するメリットはアニメーションの開始時や終了時などの実行タイミングを容易に制御できることかと。制作/実装する際の対象ブラウザや、どのようなアニメーションを実現させるか、によってそれぞれのプラグインを使い分ける必要もでてくるかと思っています。始めに紹介している「jquery-css-transform.js」「jquery-animate-css-rotate-scale.js」プラグインが残念ながらFirefox16以降は正常に動作しなくなってしまいました...。これらのプラグインを使用する状況によって、ブラウザごとに判別処理を入れて動作を切り替えたり何かしらの別途処理を加える必要が出てきてしまうかと思われます。jQueryアニメーションでCSS3のTransformを実装させる際に是非。PostsCSS(CSS3)のみで3D立方体を作る方法CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。CSS(CSS3)のみでマウスオーバーで画像拡大エフェクトを付ける方法jQueryでページ遷移時にスライドアニメーションをつけてみる【改訂版】jQueryでページ遷移時にアニメーション効果をつけてみる。1:00>oppさん情報ありがとうございます!ちゃんとアップデートされたみたいでほんとよかったです。検証してみます!よろしくお願いします。20:552012/11/22にアップデートされたデータで確認しましたー。挙動(アニメーション)はすこし変でしたが、一応アニメーション終わりの表示は大丈夫でしたー。1:40>hogeさんアップデート情報ありがとうございます!またあれこれ検証して動作確認してみます!よろしくお願いします。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。