cssでアニメーションの基礎である「Transition」の使い方を詳しくご紹介します。cssアニメーションにはtransitionとanimationの２つがあり、transitionは要素が変化するのにかかる時間やタイミングを指定するプロパティです。transitionでは簡単にアニメーションを付けることができます。「cssは書けるんだけど、cssアニメーションはよくわからない！」という方のために、まずはtransitionを学んでいきましょう。
CSS Transionの使い方
要素が変化するのにかかる時間やタイミングを指定するプロパティです。下のサンプルで、赤い四角形にホバーしてみてください。
サンプル１
パッと、一瞬で青色に変わったと思います。
では次に、これを2秒かけて変化させてみます。
サンプル２
サンプル１と比べて、ゆっくりと変化したのが確認できたと思います。しかも、赤から青に変わる途中の色(ここでは紫色)も勝手に表示してくれるんです。サンプル２のCSSをみてください。.boxの最後にtransition-duration: 2s;というプロパティが追加されていますよね。これが、「2秒かけて変化させる」transitionのプロパティです。
transitionで指定できるプロパティ
transition-duration：アニメーションにかける時間
要素のアニメーションにかける時間を指定するプロパティす。
transition-durationで指定できる値
- デフォルト値は0
- 単位はs（秒）またはms（ミリ秒）で指定
transition-property：アニメーションの対象
アニメーションさせる対象を指定するプロパティです。
transition-propertyで指定できる値
- all（デフォルト値）：すべてのプロパティ
- none：何も変化させない
- プロパティ名：widthやheight、background-colorなど個別のプロパティを指定
.boxの縦と横を100pxから300pxにするアニメーションです。transition-propertyにwidthを指定しているので、cssアニメーションであるtransition-duration: 2s;もwidthにのみ適用されていて、heightは一瞬で300pxに変わっているのがわかると思います。transition-propertyを使えばアニメーションをかける部分とかけない部分で分ける事が出来ます。
transition-timing-function：アニメーションのタイミング
アニメーションのタイミング・進行割合を指定するプロパティで、5種類あります。
transition-propertyで指定できる値
- ease（デフォルト値）：すべてのプロパティ
- linear：一定に変化させる
- ease-in：ゆっくりと始める
- ease-out：ゆっくりと終わる
- ease-in-out：ゆっくりと初めてゆっくりと終わる
紫色のバーをホバーしてみてください。上から順に、ease、liner、ease-in、ease-out、ease-in-outを指定しています。どれも3秒で300px右に動くようなプロパティを指定していますが、そのタイミングや変化の割合はそれぞれ違うのがわかると思います。
transition-delay：アニメーションの遅延
アニメーションが何秒遅延するのか（何秒後に始まるのか）を指定するプロパティです。
transition-delayで指定できる値
- デフォルト値は0
- 単位はs（秒）またはms（ミリ秒）で指定
ホバーした時、1秒立ってから色が変わったと思います。これがtransition-delayの役割です。
transitionの応用
ここまでが、transitionの基本的な説明です。transitionのデメリットといえばループができないことぐらいです。transition自体は簡単にあらゆる動きを表現するために便利なプロパティですが、その引き金となるもの（例えば、ここではhover）がCSSだけではあまりにも少ないです。しかし、JavaScriptと組み合わせることによってその幅は大きく広がります。
何かをクリックした時、何かが画面に見えた時など引き金は様々です。ここでは例として、要素をクリックした時にアニメーションをするサンプルを紹介します。
transitionを学んだこれを機に、JavaScriptも書けるようになると最強です。
これはjQueryで要素をクリックするたびに、.blueというクラスをつけたり外したりしています。
jQueryの使い方はまた今度紹介しようと思います。
さいごに
以上がcss transitionの使い方です。いかがだったでしょうか？
cssだけでアニメーションができるとサイトが重くならずに見栄えが良くなるので、ぜひチャレンジしてみてください。
また、cssアニメーションにはanimationプロパティというのもあり、こちらはかなり自由にアニメーションが出来るようになります。animationについても説明しているので、ぜひこちらもチェックしてみてください。