byCSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できてしまいます。CSSのトランジションプロパティを使った、マウスオーバーアニメーションです。簡単なのに、なめらかな動きでユーザーに楽しんでもらえると思いますよ。Referenceが便利です。サイト制作のご参考になれば幸いです。「transition」プロパティを利用する通常、マウスオーバーで色などを変更させる場合には、hover擬似クラスでカラーを指定します。ここでアニメーション効果を入れたい場合に利用するのが「transition」プロパティです。;」という使い方をします。プロパティ名=プロパティ名に「all」と記述すると、「hover」で指定したすべてのプロパティがアニメーションされます。時間=どれぐらいの時間をかけてアニメーションさせるのかをしています。「◯s」と指定します。アニメーション方法=「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定して、好みの変化をつけます。共通のHTMLとCSSCSS3トランジションを使ったマウスオーバーアニメーションのサンプルをご紹介するにあたって、共通となるHTMLとCSSを掲載しておきます。class="border">インセットボーダー</div></body></html>CSSは以下のようになります。上記htmlのdivに対してアニメーションを実装していきます。「伸縮」というアニメーション以外は、すべて共通です(右にだけ伸縮させたいので、共通化できませんでした。かけてアニメーションさせるようにしています。0.5s;}フェードインフェードインは、opacity(ボックスの透明度)で実装します。0で完全な透明になり、1.0で不透明になります。{opacity:0.5;}.fade:hover{opacity:1;}Demoカラーチェンジ色の変更は、hover擬似クラスで変化させたい色を指定します。拡大させたい場合は、transform:scale(数値)プロパティを利用します。プロパティを利用します。伸縮と書いていますが、実際にはマージンの値を変えて、あたかも伸縮しているようにみせているだけです。ここでは、左から右に伸縮させたいので、margin-leftの値を変えています。プロパティを利用します。degは傾ける角度(時計回り)になります。rotate(-30deg);}Demoフリップ3Dのような形でフリップさせるわけですが、「scaleX(-1)」を利用してあたかもフリップしているようにみせています。scaleX(-1);}Demo四角から丸へ四角形を丸に変化させるには、border-radiusプロパティを利用します。translateプロパティ(移動)を使います。animationプロパティを使います。animationプロパティを利用すると、キーフレームを利用したアニメーションを設定できます。{}」という形でキームレームを作成ます。@keyframesの中には、始点から終点までのキーフレームを設定します。始点は0%{}、終点は100%{}に記述し、適宜、1〜99%{}のキーフレームを設定します。再生時間」を指定してやります。insetプロパティを利用します。byお役に立てましたら、以下どれでも結構のですので、ポチリと......。当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。背景画像をサッとつくれる便利ツールやサイトをご紹介します。無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H記事を読むこれは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。Textures」こりゃ便利!というサービスがあったのでご紹介します。Playground」CSSで今後、ますます注目度が高まるであろうCSSフィルタ。2013」CodePenというWEBサービスをご存知でしょうか。CodePenは、HTML/CSS/Jav記事を読む月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし記事を読む画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。