jQueryCSS3アニメーションは、要素に「動き」をつけてWEBサイトをデザインするテクニックのひとつです。楽しい・気持ちのいいコンテンツにしようと多くのWEBサイトで採用されています。マウスを合わせると「ふわっと」拡大するリンク画像や、ボタンをタップするとコンテンツメニューが横からヌルっとスライドしてきたり、以前はJavascriptがなければ表現できなかったデザインが、CSSのみで実装できるようになりました。このように、ユーザーのアクションに対して小さな動きをつけることを、“マイクロインタラクション”と呼びます。動きがある部分には目線が行く心理的効果も期待できるので、「ユーザーにぜひ見てほしい部分」にアニメーションを利用するのも有効です。ナオユプルプルっと動くボタンとかにしたいなぁ...やり方は難しいのかな?たとえばこんなボタンとか。動くボタンAnimate.cssを使えばカンタンです!classを2~3コ指定するだけでアニメーションが実装できる「Animate.css」の使い方を紹介します。後半では、jQueryなどを使ってクリックやスクロールで動くアニメーション実装方法も説明していきますので、よかったら最後までお付き合いください。スタイル設定を別の設定へ遷移させることを可能にします。種類の要素で構成されています。スタイルを示すキーフレームです。同様に、アニメーション途中の通過点となるスタイルを示すこともできます。MDNCSSでは、アニメーションを定義するプロパティが用意されています。6つのプロパティを組み合わせてアニメーションを設定します。animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction省略形のanimation:ならまとめて指定することができます。}次のコードはCSSアニメーションの簡単な一例です。}}こんな風に動きます。@keyframesのfromからtoへ向かって、なめらかにスタイルが変化していますね。fromの部分を0%、toの部分を100%と書いても同じ意味になります。パーセント表記なら、50%や68%など複数のkeyframeを追加できます。複雑にアニメーションさせたい場合は、細かく指定します。これが基本的なCSSアニメーションの定義の仕方になります。animationプロパティについて更に詳しくはこちらも参考になります。Animation対応ブラウザCSSアニメーションは、各モダンブラウザでは対応済みですがIEでは10以降で対応します。IE9以下はさっさと切り捨ててしまいましょう!https://caniuse.com/#search=animationさてさて、CSSアニメーションの基本知識はこれくらいにして、ここからはCSSのアニメーションを手軽に実装できるCSSフレームワーク「Animate.css」の使い方を紹介していきます。Animate.cssは、HTML要素に2~3個のクラスを指定するだけで、76パターンもの動きを表現できるんです。Animate.cssでCSSアニメーションを実装していきましょう!Animate.cssの使い方Animate.css公式サイトからCSSファイルをダウンロードします。it」ボタンを押すと、選択したアニメーションの動きを確認することができます。セレクトメニューを変えながら、いろいろな動きを見てみてください。Animate.css」を右クリックし「名前を付けてリンク先を保存」(Windowsの場合)するとanimate.cssをダウンロードできます。ダウンロードしたCSSファイルを<head>内で読み込めば準備完了です。CDNで提供されているURLでもOKです。こっちのほうが手っ取り早いですね。href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">最新バージョンのCDNはこちらで確認することができます。アニメーションさせたい要素にclassを指定HTML要素にAnimate.css用のClassを指定することで、アニメーションを定義することができます。次のコードは一例です。infinite">bounce</p>.animated:Animate.cssの定義に「必須」のClassです。.bounce:アニメーションのパターンを指定します。bounceの場合「地面で跳ねる様な動き」をします。.infinite:アニメーションが無限ループします。1回だけ動かす場合はinfiniteは要りません。スピードやタイミングを調節する新class追加.delay-2s/.slow/.fastなどの新しいclassが追加されました。delay-nsは、アニメーション開始タイミングを「n秒」だけ遅らせます(ディレイ)。.slow/.fastは、アニメーションのスピードを変えることができます。デフォルトのスピードは「1s(1秒間)」です。500msナオユアニメーションしたい要素にClassを指定するだけで良いんだね!Animate.cssの注意点アニメーションできるのは「block要素」か「inline-block要素」。「inline要素」にはアニメーションが付けられません。それぞれの要素にAnimate.cssのclassを指定する実験です。bounce">bounce</i>実装結果。bouncebouncebouncedivやp要素はぴょんぴょん飛び跳ねていますが、iではアニメーションされません。その他spanなどのinline要素をアニメーションさせるにはdisplay:blockかinline-blockを定義する必要があります。Animate.cssのサンプル各アニメーションに対するクラス名をまとめたサンプルページを作りました。わちゃわちゃして見辛いのは勘弁してくださいwAnimate.cssのサンプルを見てみるCSSアニメーションの勉強にはこちらの書籍が参考になります。2011-04-22AmazonKindle楽天ブックスjQueryでアニメーションを操作jQueryを使ったシンプルなコードで実装します。スクロールをしていき、HTML要素がブラウザ内に入ったときにアニメーションを実行します。});});指定の要素をクリックした時にアニメーションを実行します。animationend"は、「アニメーションの終了後」という特殊なイベントになります。アニメーションの終了後、Animate.cssのクラスを削除する処理をしています。マウスを乗せた時にアニメーションしたい場合は、”click”を”mouseover”に変更してください。jQueryのイベントを使ったサンプルを見るこちらの記事を参考にさせて頂きました。【CSS3】Animate.cssを使って簡単にアニメーションを実装する。Animate.cssを補助するjquery.animateCssPlus.js「jquery.animateCssPlus.js」は、Animate.cssと一緒に使うことでクリックやホバー時にアニメーションさせることが出来るようになります。下記サイトよりjquery.animateCssPlus.js本体をダウンロードします。ITSページの下の方に「jquery.animateCssPlus.jsダウンロード」というリンクがあるので、クリックしてダウンロードします。jquery.animateCssPlus.jsの使い方アニメーションさせたいHTML要素のdata-class属性に、Animate.cssのアニメーションClassを指定します。data-class="bounce">bounce</div>jQueryで実行します。$('.btn').animateCssPlus();});これでマウスホバー時にアニメーションが実行されるようになりました。jquery.animateCssPlus.jsのオプションオプションを使えば、アニメーションの種類はJSで指定することもできます。});});各オプションの説明はこちら。クリック時にアニメーションする。ブラウザ内にスクロールインするとアニメーションする。classには、Animate.cssのアニメーションクラスを指定します。スクロールインでのアニメーションの実行は「1回」のみ。往復して何回もアニメーションしたい場合は、後述の「jQuery.inview」を使うと良いですよ。jquery.animateCssPlus.jsを使ったサンプルを見るjQuery.inview.jsjQuery.inviewは、スクロール・イン時にイベントを発火させることがカンタンにできるjQueryプラグインです。jQuery.inview」を使うと、指定したHTML要素がブラウザ内に表示されるタイミングでアニメーションさせる事ができます。ZIP」をクリックすると、まとめてファイルをダウンロード可能です。});});</script>引数isInViewは、指定した要素がブラウザ内にインするとtrue、アウトならfalseを返します。if文の条件にisInViewを指定し、クラスの追加(addClass)と削除(removeClass)を行っています。追記:2018.9.6Androidに限り、処理が遅い場合があります。端末のスペックによるものなのか検証不足により判断はできませんが、複数端末で処理が遅い現象を確認しています。高速でスクロールさせた時は、高確率で実行されません。iOSやPCではまったく問題なく動作しています。こちらのサイトを参考にさせていただきました。Replyメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。1このサイトの管理者ナオユWordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。