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

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

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ

記事を読む

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

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

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

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

記事を読む

プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18

プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos」は必見

動画にCSSだけで色調補正エフェクトをかけた「dynamically colorize videos

記事を読む

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

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

記事を読む

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

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

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

記事を読む

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

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

記事を読む