個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」

CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav

記事を読む

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー

左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ

記事を読む

Gmailを無料で便利に!「開封確認」「スケジュール送信」ができる機能拡張「myHero Toolbox」

Gmailを利用しています。 本当に便利なGmailですが、できるなら「既読通知/開封確認」「スケ

記事を読む

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し

記事を読む

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む