カテゴリー

キーワード

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

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


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

CSS transition 概要

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


今回はWEBページに動きを出してくれる、CSS3のtransitionプロパティの概要を紹介します。



transition

transitionとは

transitionプロパティのtransitionは『移り変わり、変遷、変化』という意味を持つ言葉です。

その意味通り、transitionプロパティは『時間的変化』を指定するときに使うものです。


CSS3には、transition以外にも、変形やアニメーションを表現するプロパティが他に2つあります。

それが、animationとtransformです。


3つの違いは、

transition ⇒ 滑らかに変化させる(移動時間を調整)、ループなし

animation ⇒ ページ表示後に即可動、ループあり

transform ⇒ 変形(移動・拡大・回転・傾斜・遠近)が可能、ループなし

です。


わかりづらいので、とても簡単に言うと、

transition ⇒ 要素に簡単な動きをさせる
animation ⇒ 要素に複雑な動きをさせる
transform ⇒ 要素を変形させる

となります。


animationとtransformに関しては、別記事で説明します。


transitionの対応ブラウザ

いつものように、caniuse.comで調べます。


transitionの対応ブラウザ


http://caniuse.com/#search=transition


IE9以下は対応していないようですが、それ以外の主要ブラウザはほぼ対応済みです。


ちなみに2015年3~5月のブラウザシェアはIE9が4.70%、IE8が2.64%になっています。


StatCounter

2015年3-5月 ブラウザシェア状況
http://gs.statcounter.com/#browser_version-JP-monthly-201503-201505-bar


完全に切り捨てるには少し早いかな、という感じですね。


ですから、transitionプロパティを使うときはプログレッシブエンハンスメントの考え方で、未対応のブラウザでも情報がきちんと表示されるよう配慮しましょう。

つまり、動きがなくても最低限の視認性は確保するということです。


transitionのプロパティ

transitionのプロパティは以下の4つです。


transition-property

背景色、文字のサイズなど、トランジションを適用するCSSプロパティ名を指定します。
指定したプロパティのみ、トランジションによりアニメーションさせます。


.foo {
    transition-property: background-color;
}


transition-duration

アニメーションで変化する時間の長さを指定します。
値の数を一つ指定すると、すべてのプロパティのトランジションの所要時間として適用されます。
複数の値を指定すると、プロパティごとに異なる値を指定できます。


.foo {
    transition-duration:1s;
}


transition-timing-function

変化の仕方を指定します。
始めは素早く動くけれども、変化の終盤はゆっくりになるなど。


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


transition-delay

プロパティの変更とトランジションの実行が開始されるまでの待ち時間を定義します。

.foo {
    transition-delay:0.5s;
}


transition

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


そして、これらを『transition』プロパティで一括指定できます。

こんな感じです。


.foo {
    transition: background-color 1s ease-out 0.5s;
}

transitionのサンプル

まずはソースをどうぞ。


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;
}

CSSは外部スタイルシートに書いてください。


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


サンプル

まとめ

ボタンにホバーしたときなど、ちょっとした動きを表現するのに使えますね。


次回はtransitionの各プロパティを詳しく説明します。


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


transitionの各プロパティの説明を書きました♪

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

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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