CSSのtransitionによるアニメーションを勉強してみる

css

今更ですが、transitionによるCSSアニメーションの勉強してみる。
よくあるのが、マウスオーバーしたら色が変わるとか拡大・縮小だったりなどいろいろですが、これまでJavascript (jQuery)などで対応していたものも最近、transitionが主流になってると感じるので復習も兼ねて忘備録。

transitionのプロパティを見てみよう

transitionにはいくつあのプロパティがあるので、それをまずは知ることから始めてみる。

transition-property ：変化の対象

これは、フォントカラーや幅・高さ、といった要素のどの部分のプロパティを対象とするのかを決める。複数の要素を対象とする場合は、「,（コンマ）」で繋げていく。
このプロパティを省略する・もしくは「all」を指定するとプロパティすべてが対象になります。


.sample{
 transition-property:font-size; //フォントサイズのみ
}

.sample2{
transition-property:font-size,width,top,left //フォントサイズや他のプロパティ
}

transition-duration ：変化の時間

これは変化させる開始から終了までの 時間(秒またはミリ秒)を指定します。例えば3秒なら「3s」と指定します。


.sample{
  transition-duration:3s; //3秒間のアニメーションの時間
}

transition-delay： 開始を遅延させる　

これはアニメーションの開始時間を遅らせる場合に設定します。
例えば、ロールオーバーしてから2秒後にアニメーションを開始させる場合は「2s」とします。


.sample{
  transition-delay:2s; //2秒遅らせる
}

transition-timing-function： イージング の設定

これは イージング によるアニメーションに緩急をつけたりするプロパティです。いくつか用意されています。＊下記参照

  • ease(開始と終了を滑らかに)
  • linear（一定）
  • ease-in(開始がゆっくり)
  • ease-out(終了がゆっくり)
  • ease-in-out（開始と終了がゆっくり）
  • cubic-bezier(※)　これはちょっと複雑なので省きます。

.sample{
  transition-timing-function：ease;  
}

transitionの書き方を見てみよう

ではここから実際にtransitionの書き方を見てみよう。

通常の書き方。

まずはtransitionのプロパティすべてを記載した書き方です。
例としてフォントサイズを変化させたい場合。

.sample{
font-size:14px;
transition-property: font-size;
transition-duration: 3s;
transition-delay: 2s;
transition-timing-function: ease;
}

省略した書き方

実はtransitionはbackgroundと同じように省略して記載する事ができます。
順番は「property duration timing-function delay」の順番です。半角スペースを空けて書いていきます。

.sample {
    transition:font-size 3s ease 2s;
}

アニメーションを実行させるには？

transitionの設定の方法は説明した通りですが、これをアニメーションを実行させるには、ロールオーバーやJSなどでクラスを特定のクラスが追加させた時に実行させます。その際にCSSで変化させたいプロパティを設定します。実際にサンプルでロールオーバーしたらフォントサイズの色を変えて、クリックしたらフォントサイズを変更してみます。

See the Pen transitionによるアニメーション by 石切山 公宏 (@kirikirimai) on CodePen.

複数のプロパティを変化させるには？

今度はいろんなパターンを見ていきましょう。今後はすべて省略した形でtransitionアニメーションを書いていきます。

複数のプロパティ同時にアニメーションさせる

複数のプロパティをまとめてアニメーションさせるなら、「transition-property」を省略か「all」にすればいいです。

参考例としてボックスの「幅」「高さ」「背景色」を変化させたい場合。

.sample {
　　width:200px;
　　height:200px;
    background-color:#333;
    transition:all 3s ease;
}
.sample:hover {
   width:400px;
   height:400px;
    background-color:#ff0000;
}

See the Pen transitionに複数のプロパティを変更 by 石切山 公宏 (@kirikirimai) on CodePen.

変化するスピードをプロパティ事に変えたい場合

上記の例だと幅・高さ・背景色を同じスピードで変化させましたが、別々に変化させたい時もあるかと思います。その場合は、「transition-property」「 transition-duration」を別々に記載する方法と省略する方法があります。

別々に記載する場合

.sample {
　　width:200px;
　　height:200px;
    transition-property:width,height;
    transition-duration:1s,2s;
}

見ていただくと分かる通り、 「transition-property」「 transition-duration」 それぞれ変化させるプロパティとスピードを「,（コンマ）」で区切って指定します。

省略して記載する場合

.sample {
　　width:200px;
　　height:200px;
  　transition:width 1s,height 2s;
}

省略する場合は、変化させるプロパティとスピードを半角スペースを空けて1セットとして、ほかのプロパティと「,（コンマ）」で区切っていきます。

See the Pen 変化するスピードをプロパティ事に変えたい場合 by 石切山 公宏 (@kirikirimai) on CodePen.

transitionのブラウザ対応について

ほとんどはブラウザ対応は出来ていますが、昔のIEとは対応できなさそうですね。それ以外だと普通に対応してるので、使っても問題ないんじゃないかなと思います。

transitionのブラウザ対応の状況
transitionのブラウザ対応の状況

古いブラウザに対して対応させるためにはベンダープレフィックスでも記載しておくのも良いかと思います。

.sample {
　　width:200px;
　　height:200px;
  　transition:all 3s ease-out;
　　-webkit-transition:all 3s ease-out;
　　-moz-transition:all 3s ease-out;
　　-o-transition:all 3s ease-out;
}

まとめ

transitionプロパティについて、まとめてみましたが、以前のようにJavascriptやjQueryで記載することよりtransitionによるアニメーションが増えてきたと思います。
次回は移動へ変形といった部分にも触れてみたいと思います。