Bootstrap」。Bootstrap3(以下、MDB3と表記)」のご紹介4回目です。今回はアニメーションの実装について。~アニメーションをテキストに実装アニメーションをボタンに実装アニメーションをカスタマイズ余談:ベンダープレフィックスアニメーションをテキストに実装アニメーションは、基本的にテキストでも画像でもボタンでも使えます。全ての要素を試したわけではないですが、今のところインライン要素(span等)以外は普通に動きました。テキストをアニメーションで動かしてみましょう。コードの記述例は以下になります。infinite">swing</p>まず、アニメーションで動かしたい要素に、class「animated」を付与します。次にアニメーションの種類を決めてclassで付与します。以下のような種類があります。.bounce.flash.pulse.rubberBand.shake.headShake.swing.tada.wobble.jello.bounceIn.bounceInDown.bounceInLeft.bounceInRight.bounceInUp.bounceOut.bounceOutDown.bounceOutLeft.bounceOutRight.bounceOutUp.fadeIn.fadeInDown.fadeInDownBig.fadeInLeft.fadeInLeftBig.fadeInRight.fadeInRightBig.fadeInUp.fadeInUpBig.fadeOut.fadeOutDown.fadeOutDownBig.fadeOutLeft.fadeOutLeftBig.fadeOutRight.fadeOutRightBig.fadeOutUp.fadeOutUpBig.flipInX.flipInY.flipOutX.flipOutY.lightSpeedIn.lightSpeedOut.rotateIn.rotateInDownLeft.rotateInDownRight.rotateInUpLeft.rotateInUpRight.rotateOut.rotateOutDownLeft.rotateOutDownRight.rotateOutUpLeft.rotateOutUpRight.hinge.rollIn.rollOut.zoomIn.zoomInDown.zoomInLeft.zoomInRight.zoomInUp.zoomOut.zoomOutDown.zoomOutLeft.zoomOutRight.zoomOutUp.slideInDown.slideInLeft.slideInRight.slideInUp.slideOutDown.slideOutLeft.slideOutRight.slideOutUpすごい数です。具体的にどういう動きをするかは下記ページで確認してください。Bootstrapまた、アニメーションの動きをループさせたい場合はclass「infinite」を付与します。デモページを作ってみました。今度はアニメーションをボタンに実装してみました。コードの記述例は以下になります。hinge">hinge</button>実際の動きはデモページをご覧ください。*デモページ:アニメーション・ボタンに実装これも好き勝手に動いてますが、テキストと違ってこっちの方が実用性がありそうです。2段目「rubberBand」と3段目「tada」は、クリックを誘発する効果がありそうですね。アニメーションをカスタマイズアニメーションの時間を変更したり、遅延を追加することも可能です。これにはjQueryの実装が前提となります。例として画像をアニメーションで動かします。コードの記述例は以下となります。}画像には任意のid(例:#anime)を付与します。JSのコードにはidと、アニメーションの種類のclassを記述します(例:fadeOut)。CSSのプロパティは以下になります。例:infinite(ループ)CSSでは「vendor」の箇所にベンダープレフィックスを記述してください。ちなみに、主要ブラウザのベンダープレフィックスは以下になります。Explorer、Edge実際の動きはデモページをご覧ください。余談:ベンダープレフィックス実はベンダープレフィックスを付けなくても、主要ブラウザは全てアニメーションを実装済なので普通に動きます。W3Cの策定ではまだ草案の段階なので、ベンダープレフィックスは記述しておいた方が無難です。こんなの面倒くさいですが、作法みたいなものです。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。