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

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

デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60

新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今

記事を読む

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール

記事を読む

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し、?部分の指摘もしてくれるDirty Markupをご紹

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?

各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

ブラウザの閲覧履歴をファビコンで一覧表示するChrome機能拡張

もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」

ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む