CSSアニメーションの基本!Transitionを使ってみよう

2018年9月18日

cssでアニメーションの基礎である「Transition」の使い方を詳しくご紹介します。
「cssは書けるんだけど、cssアニメーションはよくわからないから書けない!」という方のために、まずtransitionを学んでいきましょう。

CSS Transion

transitionとは、要素が変化するのにかかる時間やタイミングを指定するプロパティです。簡単にアニメーションをアニメーションを付けることができます。
下のサンプルで、赤い四角形にホバーしてみてください。

サンプル1

パッと、一瞬で青色に変わったと思います。
では次に、これを2秒かけて変化させてみます。

サンプル2

サンプル1と比べて、ゆっくりと変化したのが確認できたと思います。赤から青に変わる中間地点(ここでは紫色)も勝手に表示してくれるんです。サンプル2のCSSをみてください。.boxの最後にtransition-duration: 2s;というプロパティが追加されていますよね。これが、「2秒かけて変化させて」という命令なんです。

「あれ?よく見かけるコードはtransition: 2s all ease 0s;みたいに書かれてるよ?」
と思った方もいるかと思います。その通りです。transition: の後にたくさん続けて書いてあるのは、省略形なんです。
transition: 2s all ease 0s;を分解すると、こうなります。

transition-duration: 2s;
transition-property: all;
transition-timing-function: ease;
transition-delay: 0s;
→変化にかける時間
→変化させるプロパティ
→変化のタイミング・割合を指定
→変化の開始時間を指定

それぞれのプロパティについて、詳しくみて行きましょう。

transition-duration

要素のアニメーションにかける時間を指定するプロパティで、単位はs(秒)またはms(ミリ秒)で指定します。
デフォルト値:0s

transition-property

アニメーションさせる対象を指定するプロパティで、all(全てのプロパティ)やnone(何も変化させない)の他にもwidthやheight、background-colorなど個別のプロパティを指定できます。
デフォルト値:all
使い方はこんな感じ。

サンプル3

.boxの縦と横を100pxから300pxにするアニメーションです。transition-propertyにwidthを指定しているので、cssアニメーションであるtransition-duration: 2s;もwidthにのみ適用されていて、heightは一瞬で300pxに変わっているのがわかると思います。transition-propertyを使えばアニメーションをかける部分とかけない部分で分ける事が出来ますね。

transition-timing-function

アニメーションのタイミング・進行割合を指定するプロパティで、以下の5種類から簡単に使えます。
デフォルト値:ease

ease:始まりと終わりを滑らかにする
linear:一定に変化させる
ease-in:ゆっくりと始める
ease-out:ゆっくりと終わる
ease-in-out:ゆっくりと初めてゆっくりと終わる

文字で説明されてもよくわからん。。。と思うので、実際に見て見ましょう。

サンプル4

上から順に、ease、liner、ease-in、ease-out、ease-in-outを指定しています。どれも3秒で300px右に動くようなプロパティを指定していますが、そのタイミングや変化の割合はそれぞれ違うのがわかると思います。

transition-delay

アニメーションが何秒後に始まるのかを指定するプロパティで、単位はs(秒)またはms(ミリ秒)で指定します。
transition-delay: 0s;にすればすぐに始まるし、transition-delay: 1s;にすれば1秒後に始まります。
デフォルト値:0s
使い方はこんな感じ。

サンプル5

ホバーした時、1秒立ってから色が変わったと思います。これがtransition-delayの役割です。

transitionの応用

ここまでが、transitionの基本的な説明です。transitionのデメリットといえばループができないことぐらいです。transition自体は簡単にあらゆる動きを表現するために便利なプロパティですが、その引き金となるもの(例えば、ここではhover)がCSSだけではあまりにも少ないです。しかし、JavaScriptと組み合わせることによってその幅は大きく広がります。
何かをクリックした時、何かが画面に見えた時など引き金は様々です。ここでは例として、要素をクリックした時にアニメーションをするサンプルを紹介します。
transitionを学んだこれを機に、JavaScriptも書けるようになると良いですね。

サンプル6

これはjQueryで要素をクリックするたびに、.blueというクラスをつけたり外したりしています。
jQueryの使い方はまた今度紹介しようと思います。

以上、Transitionの使い方でした。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です