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

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

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

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

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

売上手数料なし!簡単・便利なWixStoresでネットショップを開業する方法

「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの

記事を読む

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む

CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19

CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現

記事を読む

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Fra

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む