このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.11.20

css3 transitionアニメーション

css3ではtransitionプロパティを用いて時間的変化をつける事が可能となります。

transition (時間的変化をまとめて指定)

transitionプロパティは、transition効果(時間的変化)をまとめて設定する場合に使用します。

[code]transition: all 0.6s linear 0;[/code]
[code]-moz-transition: all 0.6s linear 0;
-webkit-transition: all 0.6s linear 0;[/code]

transition: all(※1) 0.6s(※2) linear(※3) 0(※ 4);

※1  適応するcssプロパティの設定(backgroung,borderなど個別で指定可)

※2 変化にかかる時間。

※3 変化の仕方(linearは一定。)

※4 アニメーションを始めるタイミング(0だとすぐスタートします。)

デモページ

↓ 個別で指定する場合 ↓ 

transition-property(時間的変化を適応するCSSプロパティ指定)※1

transition-propertyプロパティは、transition(時間的変化)効果を適用するCSSプロパティ名を指定する場合に使用します。

all : 変化を適用できるプロパティすべてが変化(初期値)

none : どのプロパティも変化させない

プロパティ名 : 変化させるプロパティ名のリストをカンマ( , )区切りで指定

例:

[code]transition-property: background-color, color,width;
-webkit-transition-property: background-color, color,width; [/code]

まとめて指定 transition: all 0.6s linear 0;

デモページ

transition-duration (変化に掛かる時間を指定)※2

transition-durationプロパティは、変化に掛かる時間を指定する場合に使用します。

時間 : 変化に掛かる時間を指定(初期値は0)

例:

[code]transition-duration:1s;
-webkit-transition-duration:1s;[/code]

まとめて指定 transition: all 0.6s linear 0;

デモページ

transition-timing-function (変化のタイミング・仕方を指定) ※3

transition-timing-functionプロパティは、変化のタイミング・仕方を指定する場合に使用します。

ease : 開始と完了を滑らかにする(初期値)

linear : 一定

ease-in : ゆっくり始まる

ease-out : ゆっくり終わる

ease-in-out : ゆっくり始まってゆっくり終わる 

cubic-bezier(数値, 数値, 数値, 数値) : 数値による指定

例:

[code]transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;[/code]

まとめて指定 transition: all 0.6s linear 0;

デモページ

transition-delay  (変化がいつ始まるかを指定)※4

transition-delayプロパティは、変化がいつ始まるかを指定する場合に使用します。

時間 : 変化が始まる時間を指定(初期値は0)

例:

[code]transition-delay:3s;
-webkit-transition-delay:3s;[/code]

まとめて指定 transition: all 0.6s linear 0;

css3 拡大,縮小,移動,変形 transformプロパティのまとめ

transitionアニメーションで変化させたデモページ

デモページ

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。