個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できてしまいます。
CSSのトランジションプロパティを使った、マウスオーバーアニメーションです。
簡単なのに、なめらかな動きでユーザーに楽しんでもらえると思いますよ。
なお、ブラウザーのサポート状況については、CSS3 Referenceが便利です。
サイト制作のご参考になれば幸いです。

「transition」プロパティを利用する

通常、マウスオーバーで色などを変更させる場合には、hover擬似クラスでカラーを指定します。
ここでアニメーション効果を入れたい場合に利用するのが「transition」プロパティです。

基本は「transition: プロパティ名 時間 アニメーション方法 ;」

「transition」プロパティの基本は「transition: プロパティ名 時間 アニメーション方法 ;」という使い方をします。
プロパティ名
=プロパティ名に「all」と記述すると、「hover」で指定したすべてのプロパティがアニメーションされます。
時間
=どれぐらいの時間をかけてアニメーションさせるのかをしています。「◯s」と指定します。
アニメーション方法
=「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定して、好みの変化をつけます。

共通のHTMLとCSS

CSS3トランジションを使ったマウスオーバーアニメーションのサンプルをご紹介するにあたって、共通となるHTMLとCSSを掲載しておきます。

CSSは以下のようになります。
上記htmlのdivに対してアニメーションを実装していきます。
「伸縮」というアニメーション以外は、すべて共通です(右にだけ伸縮させたいので、共通化できませんでした。すいません)。
「transition」プロパティは、all=すべてに適用し、時間=0.5s かけてアニメーションさせるようにしています。

フェードイン

フェードインは、opacity(ボックスの透明度)で実装します。
0で完全な透明になり、1.0で不透明になります。

Demo

カラーチェンジ

色の変更は、hover擬似クラスで変化させたい色を指定します。

Demo

拡大

拡大させたい場合は、transform:scale(数値)プロパティを利用します。

Demo

縮小

縮小させたい場合も、transform:scale(数値) プロパティを利用します。

Demo

伸縮

伸縮と書いていますが、実際にはマージンの値を変えて、あたかも伸縮しているようにみせているだけです。
ここでは、左から右に伸縮させたいので、margin-leftの値を変えています。

Demo

傾き

要素を傾けたいときには、transform: rotate(数値deg) プロパティを利用します。
degは傾ける角度(時計回り)になります。

Demo

フリップ

3Dのような形でフリップさせるわけですが、「scaleX(-1)」を利用してあたかもフリップしているようにみせています。

Demo

四角から丸へ

四角形を丸に変化させるには、border-radiusプロパティを利用します。

Demo

3Dシャドウ

3Dシャドウを実装するには、box-shadowプロパティと、transform: translateプロパティ(移動)を使います。

Demo

スウィング

左右にブルブルふるえる動きですが、transform: translateプロパティ(移動)にくわえ、@keyframesanimationプロパティを使います。
animationプロパティを利用すると、キーフレームを利用したアニメーションを設定できます。
キーフレームは「@keyframes キーフレーム名 {}」という形でキームレームを作成ます。
@keyframesの中には、始点から終点までのキーフレームを設定します。
始点は0%{}、終点は100%{}に記述し、適宜、1〜99%{}のキーフレームを設定します。
設定したキーフレームに対してアニメーションを実装するには、「animation キーフレーム名 再生時間」を指定してやります。

Demo

インセットボーダー

ボックスの内側にシャドウをつけるので、box-shadow: insetプロパティを利用します。

Demo

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 4
  • 15

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail

記事を読む

HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)

以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む

参考にしたい!シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む

今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む