css3 初心者の為のtransitionについてのまとめ

css, WEB制作

動的な表現をWEBページで実現させるには、javascriptライブラリのjQuery等を使えば手っ取り早く出来ていいのですが、最近ではcss3でのtransitionやanimateを使って実装するケースが増えてきていますね。

実際触ってみても楽しいので、もっとcssでアニメーションすればいいと思うよ。
cssセレクタとの兼ね合いでハマッた事もあるので、まとめてみた。

スポンサーリンク

css3 transitionの基本知識編

css3のtransitionの動作では、一体どのように記述して動作するのか?
基本的な書き方は以下の通りで、省略した書き方も出来ます。

サンプルではマウスオーバーする事で、背景色を変化させています。
実際の動作は下のサンプルをマウスオーバーしてみてください。

1
2
3

省略した書き方の例
値はtransition-property,transition-duration,transition-timing-function,transition-delayの順で指定する

<div class="transition_wrap">
    <div class="transition_box sample_1"><span>1</span></div>
    <div class="transition_box sample_1"><span>2</span></div>
    <div class="transition_box sample_1"><span>3</span></div>
</div>
.sample_1{
    /*値はtransition-property,transition-duration,transition-timing-function,transition-delayの順で指定する*/
    transition: background-color 0.5s linear 0.1s;
}

.sample_1:hover{
    /*アニメーションをさせるプロパティの最終値は:hover等の部分に書く*/
    background-color: red;
}
css3 transitionの解説画像

css3 transitionの解説画像

プロパティの値も省略した書き方の例

省略出来るtransitionのプロパティですが、【一応全てのプロパティは省略出来る】です。
省略して書かない場合は各プロパティの初期値が適用されます。

ただ、transition-durationの初期値は【0】なので、それだとただhoverしたような動作になってしまうので、durationを省略する事はあまり無いと思います。

1
2
3

1はtransition-propertyを省略した例
2はtransition-propertyとtransition-timing-functionを省略した例
3はtransition-duration以外を省略した例

<div class="transition_wrap">
    <div class="transition_box sample_1_2"><span>1</span></div>
    <div class="transition_box sample_1_3"><span>2</span></div>
    <div class="transition_box sample_1_4"><span>3</span></div>
</div>
.sample_1_2{
    /*transition-propertyを省略した例*/
    transition: 0.5s linear 0.5s;
}

.sample_1_2:hover{
    background-color: red;
    -webkit-box-shadow: 0 -5em 0 0 rgba(255,255,255,1) inset;
    box-shadow: 0 -5em 0 0 rgba(255,255,255,1) inset;
}

.sample_1_3{
    /*transition-propertyとtransition-timing-functionを省略した例*/
    transition: 0.5s 0.5s;
}

.sample_1_3:hover{
    background-color: yellow;
    border-radius:10em;
}

.sample_1_4{
    /*transition-propertyとtransition-timing-functionとtransition-delayを省略した例*/
    transition: 0.5s;
}

.sample_1_4:hover{
    background-color: green;
    box-shadow: 0 -5em 0 0 rgba(255,255,255,1) inset;
    border-radius:10em;
}

さてさてサンプルを見てお気づきの方も居ると思いますが、【transition-property】を省略すると、【:hover】で指定しているdeclaration blockのプロパティ全てに適用されます。

こういった書き方は、複雑でないアニメーション効果を出したい時によく使われる書き方です。

css3 transitionの説明画像

css3 transitionの説明画像

transitionの各プロパティについて

transition-propertyやらtransition-timing-functionやら色々と出てきましたが、ここでそれらのプロパティについての補足説明をはさみたいと思います。

プロパティ 初期値
transition-property none
transition-duration 0
transition-timing-function ease
transition-delay 0

transition-propertyは効果を適用するプロパティ名を指定する。
,(カンマ)区切りで複数の指定が可能なので、複数指定する場合は複雑なアニメーション効果を作りたい時に使用する。

transition-durationはプロパティ値の変化にかかる時間を指定する。
動作の特徴としては、hover等のイベント中にマウスを要素外に外すと、変化中のアニメーションはそこで止まり、hover前の値に戻っていく。戻っていく速度もtransition-durationで指定した速度に影響を受ける。

transition-timing-functionは変化速度の進行具合の調整をする事が出来る。
初期値のease以外にも使えるキーワードがあり、cubic-bezier関数を使用する事で好みのアニメーション効果を作成できる。

transition-delayは変化が始まるタイミングを指定する。
値には負の値(-1s)等も指定できる。

transition-timing-functionのキーワードとcubic-bezier

変化の進行具合を調整出来るtiming-functionですが、ちょっと視覚的に見ないと分りづらいですよね。
ということで、サンプル作りました。

ease
linear
ease-in
ease-out
ease-in-out
<div class="transition_wrap">
    <div class="transition_box timing-function_1"><span>ease</span></div>
    <div class="transition_box timing-function_2"><span>linear</span></div>
    <div class="transition_box timing-function_3"><span>ease-in</span></div>
    <div class="transition_box timing-function_4"><span>ease-out</span></div>
    <div class="transition_box timing-function_5"><span>ease-in-out</span></div>
</div>
.timing-function_1{
    position:relative;
    top:0;
    transition: 1s ease;
}

.timing-function_1:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_2{
    position:relative;
    top:0;
    transition: 1s linear;
}

.timing-function_2:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_3{
    position:relative;
    top:0;
    transition: 1s ease-in;
}

.timing-function_3:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_4{
    position:relative;
    top:0;
    transition: 1s ease-out;
}

.timing-function_4:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_5{
    position:relative;
    top:0;
    transition: 1s ease-in-out;
}

.timing-function_5:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

このようにキーワードを使うことでお手軽に調整出来るんですが、こだわりたい人はcubic-bezier関数を使って細かい指定ができます。
cubic-bezier関数で指定できる値は0~1の範囲内で0.01からの指定も出来ます。

1
2
3
4
5
<div class="transition_wrap">
    <div class="transition_box timing-function_6"><span>1</span></div>
    <div class="transition_box timing-function_7"><span>2</span></div>
    <div class="transition_box timing-function_8"><span>3</span></div>
    <div class="transition_box timing-function_9"><span>4</span></div>
    <div class="transition_box timing-function_10"><span>5</span></div>
</div>
.timing-function_6{
    position:relative;
    top:0;
    transition: 1s cubic-bezier(1,0,0,1);
}

.timing-function_6:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_7{
    position:relative;
    top:0;
    transition: 1s cubic-bezier(0,1,0.25,1);
}

.timing-function_7:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_8{
    position:relative;
    top:0;
    transition: 1s cubic-bezier(0,0,0,0);
}

.timing-function_8:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_9{
    position:relative;
    top:0;
    transition: 1s cubic-bezier(1,0,0,0);
}

.timing-function_9:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

.timing-function_10{
    position:relative;
    top:0;
    transition: 1s cubic-bezier(1,1,0,0.8);
}

.timing-function_10:hover{
    top:-2em;
    background:red;
    border-radius:10em;
}

もっとイージング機能が視覚的に分りやすいサイトがありましたので、こちらも参考に。
Easing Function 早見表

transitionのみで省略しない書き方

transitionのみで省略する書き方が個人的には書きやすいと思うのですが、省略しない書き方はメンテナンス性や可読性において優れているのかもしれません。
サンプルの例では、boxの要素をhoverした時に1,2,3の文字色を変化させるものです。

1
2
3

省略しない書き方
一つ一つの値を書かなければいけないが、勉強する目的であれば省略しないで書いた方が覚えやすいかもしれない。

<div class="transition_wrap">
    <div class="transition_box sample_2"><span>1</span></div>
    <div class="transition_box sample_2"><span>2</span></div>
    <div class="transition_box sample_2"><span>3</span></div>
</div>
.sample_2 span{
    transition-property: color;
    transition-duration: 0.5s;
    transition-timing-function: linear;
    transition-delay: 0.1s;
    /* transition: color 0.5s linear 0.1s; 省略すれば一行で済む*/
}
.sample_2:hover span{
    color: red;
}

transitionのブラウザの対応状況

css3 transitionのブラウザ対応状況

css3 transitionのブラウザ対応状況

CSS3の対応状況を調べるのに便利なCan I use… Support tables for HTML5, CSS3, etcで対応状況を見てみました。

transitionだけに限って言えば現状ではベンダープレフィックスを付けなくてもいい感じです。

但し、ひとつ注意点があります。transitionで指定するプロパティ値に、ベンダープレフィックスが必要なものがある場合は、transitionにも付けておかなければならない。
一番使いそうなプロパティの例で言えば、現状transformがsafari,Android等のwebkit系のブラウザとIE9で付けなければいけませんね。

IEのサポートは10からなので、プログレッシブエンハンスメントの考え方でcss3 transitionを実装してもいいかと思います。
IE10以下のブラウザではjQuery等を使い対応するのが良さそうですね。

初心者がよくやる3つの間違い

自分が最初に触り始めた頃に間違えてた記述です。
といっても自分限定かもしれませんが^^;

1
2
3

1、transitionを書く所を間違える

.hoge{
    color:#000;
    background:#fff;
}

.hoge:hover{
    background:red;
    transition:0.5s;
}

はい、hoverイベントの所にtransitionを書いちゃっていますね、これoutです。
こうして書くと、hoverした時はいいんですが、マウスを要素から外したら一瞬で元の状態に戻ります。
意図してそういう動作をさせたい場合があるならこれでOK。

2、hoverイベントを発火させようにも、その要素をhover出来ない状態にしてしまう

.hoge_2{
    visibility: hidden;
    transition:1s;
}

.hoge_2:hover{
    visibility: visible;
    background:rgba(0,0,255,0.5);
    border-radius:1em 5em;
}

非表示にしてる要素を表示したい時にやった間違いですね。
display:none;とかでもやろうとしてたの思い出した。
もし非表示のものを、マウスオーバーで表示させたい時は、opacityとか透明度とz-indexでやるとかするのがいいと思います。

上記の方法を直すんだったらこの記述かな。

.hoge_2 span{
    visibility: hidden;
    transition:1s;
}

.hoge_2:hover span{
    visibility: visible;
    background:rgba(0,0,255,0.5);
    border-radius:1em 5em;
}

3、親要素を指定しようとする

.hoge_3{
    color:#000;
    background:#fff;
    transition:0.5s ;
}

.hoge_3:hover .transition_wrap{
    box-shadow:0 0 5em 2em rgba(255,0,0,1) inset;
}

hover時に親要素をアニメーションさせたい。
色々やってみてCSSのみでは無理だと気づきました。
そういう場合はjQueryとか使えば簡単に実装できます。

どうしてもCSSのみでやりたい場合は、ちょっとしたテクニックを使わなければなりません。
(厳密に言うと親要素を操作するわけではないのだが)

まとめ

css transition使って動きのあるデザインを作ったら、中々楽しいですよ。
実際仕事で使う分にはメニューやローディングアイコンと使える場面が狭まっていきますが、これからの時代を見越すと今の内にでもマスターしておきたいところですね。私も頑張って勉強します。

この記事が気に入ったら
『いいね』しよう!