カテゴリー

キーワード

 
> 【CSS3】CSSで動きが出せるtr...

【CSS3】CSSで動きが出せるtransitionプロパティの解説、実践編


2015 年 6 月 5 日 投稿    view: 18616
タグ:
このエントリーをはてなブックマークに追加

transitionプロパティ 実践編

こんにちは、WEBマーケティング部の杉尾です。


前回に引き続き、transitionプロパティを紹介します。
今回はより詳しい解説です。


前回はコチラ
【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します



transitionプロパティ


まずは前提条件

前回も紹介しましたが、transitionプロパティはIE9以下では動きません。


transitionプロパティ canaiuse.com画像


他の主要ブラウザは、ほぼ対応しています。


ですので、IE9以下に対応する必要がある場合はプログレッシブエンハンスメントの考え方を採用し、IE9以下で見ても情報を取得するのに問題がないようにしましょう。


前回のおさらいと解説

前回、紹介したサンプルコードはコチラです。


HTML

<div class="test_transition">サンプル</div>

CSS

.test_transition {
    width:100px;
    height:100px;
    background:#ffffff;
    border:1px solid #555555;
    transition-property:background,width;
    transition-duration:3s;
    transition-timing-function:ease-out;
} 
.test_transition:hover{
    width:250px;
    background:#555555;
}

解説

6行目、transition-propertyで変化させるスタイルを指定します。この場合は『背景色』と『横幅』を変えます。
複数を変化させるときは、間をカンマで区切ってください。
7行目、transition-durationで変化に要する時間を指定します。この場合は3秒かけて変化します。
8行目、transition-timing-functionで変化の速度、進行具合を指定します。この場合は『最初速く、ゆっくり終わる』という指定です。
そして、10行目からの指定で、マウスを乗せたときにどうなるかという『変化後』を指定します。


それが下のサンプルになるわけですね。


サンプル
下の四角にマウスを合わせてみてください。


サンプル

各プロパティを紹介

では、各プロパティを紹介します。


transition-property

transition-propertyは、変化させたいCSSのプロパティを指定してください。


前項のサンプルコードで指定しているように、backgroundのようなショートハンドも使えます。


指定できる値は

all(初期値)
none(どのプロパティも変化しない)
プロパティ名

です。


transition-timing-function

transition-durationはどんな感じに変化するかを指定します。
サンプルコードと併せてご覧ください。


HTML、CSSは前々項で紹介したサンプルコードを使います。
クラス名と8行目の『transition-timing-function』の値の部分だけ変えていきます。


///////////// ease /////////////
最初と最後がゆっくり滑らかに変化します。


CSS

.test_transition_ease {
    transition-timing-function:ease;
}

サンプル

サンプル

///////////// linear /////////////
一定の速度で変化します。


CSS

.test_transition_linear {
    transition-timing-function:linear;
}

サンプル

サンプル

///////////// ease-in /////////////
ゆっくり始まり、徐々に速くなります。


CSS

.test_transition_ease-in {
    transition-timing-function:ease-in;
}

サンプル

サンプル

///////////// ease-out /////////////
速く始まり、徐々に遅くなります。


CSS

.test_transition_ease-out {
    transition-timing-function:ease-out;
}

サンプル

サンプル

///////////// ease-in-out /////////////
動きはeaseと同じく、最初と最後がゆっくり滑らかに変化します。
違いは速度です。ease-in-outの方がよりゆっくり始まりゆっくり終わります。


【CSS】

.test_transition_ease-in-out {
    transition-timing-function:ease-in-out;
}

サンプル

サンプル

///////////// step-start /////////////
一瞬で変化します。hoverと似たような動きになります。


CSS

.test_transition_step-start {
    transition-timing-function:step-start;
}

サンプル

サンプル

///////////// step-end /////////////
一瞬で変化します。transition-durationで指定した時間が経過した後に変化します。


CSS

.test_transition_step-end {
    transition-timing-function:step-end;
}

サンプル

サンプル

///////////// steps(数字, start or end) /////////////
steps(数字,start)もしくは、steps(数字,end)の形で指定します。
引数の1つ目に入るのは『数字』、2つ目に入るのは『start』もしくは『end』です。


数字は変化の起きるポイントがいくつあるかを示しています。


transition-durationを2sと指定し、transition-timing-functionをstep(3,start)と指定すると、
0秒、0.66秒、1.33秒のときに変化します。


CSS

.test_transition_step-1 {
    transition-duration:2s;
    transition-timing-function:step(3,start);
}

サンプル

サンプル

transition-durationを2sと指定し、transition-timing-functionをstep(3,end)と指定すると、
0.66秒、1.33秒、2秒のときに変化します。


CSS

.test_transition_step-2 {
    transition-duration:2s;
    transition-timing-function:step(3,end);
}

サンプル

サンプル

///////////// cubic-bezier(数字, 数字, 数字, 数字) /////////////
transition-timing-functionプロパティでは、変化の進行割合を3次ベジェ曲線で指定します。


3次ベジェ曲線


cubic-bezier関数で指定できる値は0~1の範囲内です。
3次ベジェ曲線のP1とP2を(x1,y1,x2,y2)で指定します。


CSS

.test_transition_cubic-bezier {
    transition-duration:5s;
    transition-timing-function:cubic-bezier(0.9,0.1,0.9,1.0);
}

この指定なら、最初はかなりゆっくり動いて、後から速く動きます。


サンプル

サンプル

transition-duration

変化前から、完全に変化し終わるまでの時間を指定します。
初期値は0sです。


0sだと一瞬で変化します。


transition-delay

transition-delayで指定した秒数だけ遅れて変化を開始します。


transition-delay:10sと指定した場合、最初の10秒間は何も起きません。


transition

上記4つのショートハンドです。


CSS

transition:transition-property transition-duration transition-timing-function transition-delay;

この順番で指定してください。


気をつけたいのは、transition-propertyが複数ある場合です。
カンマで区切ってそれぞれを書いてください。


前々項で紹介したサンプルコードをショートハンドで書くと以下のようになります。

CSSの6~8行目です。


【CSS】

.test_transition {
    transition:background 3s ease-out,width 3s ease-out;
}

まとめ

CSS3で画面に動きを与えるtransitionを紹介しました。


JavaScriptを使わなくても簡単な動きなら表現できるのがありがたいですね。


是非、使ってみてください。


次回は、transitionより複雑な動きができるanimationを紹介したいと思います。


最後までお読みいただき、ありがとうございました。


前回はコチラです。

【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事