CSSアニメーション②~transitionプロパティ編~

CSSで文字の色や背景色を変える際、簡単なアニメーションをつけたいと思うことはありませんか？動きのあるサイトはおしゃれな仕上がりになりユーザーに楽しんでもらえます。

CSSのtransitionというプロパティを使用すれば簡単なアニメーションを作ることができます。

この記事ではtransitionプロパティでできることやtransitionの使い方を解説します。この記事を読むと基礎知識や使い方だけでなくcssアニメーションとの違いやtransitionを使うことが多い場面などがわかります。transitionの使い方を学習して動きのあるおしゃれなサイトを作ってみましょう。

目次

• transitionプロパティとは
• transitionを使ったアニメーションの作り方
• transitionの種類・指定の方法
• transitionとCSSアニメーションとの違い
• transitionを使うことが多い場面
• transitionが効かない時のチェックポイント

transitionプロパティとは

transitionプロパティを一言で表すと「遷移を見せるプロパティ」です。

言い換えると「CSSプロパティの上書き前と上書き後のスタイルの変化を、指定した時間かけて見せるプロパティ」となります。

次の例を見てみましょう。
灰色の背景にカーソルを合わせると、オレンジのボックスが右に動きます。

<div class="wrapper">
  <div class="box"></div>
</div>

/* 上書き前 */
.box {
  transform: translateX(0);
  transition: transform 1s;
}

/* 上書き後 */
.wrapper:hover .box {
  transform: translateX(240px);
}

/* その他 */
.wrapper {
  padding: 8px;
  background: lightgray;
}

.box {
  width: 80px;
  height: 80px;
  background: orange;
}

出力結果

変化するい際に時間をかけて動いているのがわかります。こちらはtransitionプロパティを使っているからです。

transitionを使ったアニメーションの作り方

transitionを使うと簡単なアニメーションを作成することができます。

以下にアニメーションのサンプルを用意しました。オレンジ色の要素にホバーすると枠内に広がります。

<div class="perent">
  <div class="child"></div>
</div>

.perent{
  border: 1px solid #000;
  height: 200px;
}

.child{
  transition-duration: 1s;
  background: orange;
  width: 30%;
  height: 100px;
}

.child:hover{
  width: 100%;
  height: 100%;
}

出力結果

このような動きを表現できるのがtransitionプロパティです。

transitionの種類・指定の方法

transitionのプロパティには4つの種類があります。

それぞれ解説していきます。

transition-duration

transition-durationはアニメーションの秒数を指定します。何秒かけて変化させるかを設定できます。記述例は以下のようになります。

transition-duration: 秒数;

s（秒）もしくはms（ミリ秒）が指定できる値です。

サンプルにホバーしてみてください。ホバー時から1秒かけてアニメーションが発生します。

<div class="perent">
  <div class="child">背景色が1秒かけて変化します</div>
</div>

.perent{
  border: 1px solid #000;
  height: 200px;
}

.child{
  transition-duration: 1s;
  background: orange;
  width: 30%;
  height: 100px;
}

.child:hover{
  width: 100%;
  height: 100%;
}

出力結果

transition-delay

transition-delayはアニメーションの開始を遅らせることができます。こちらもtransition-durationと同様にs（秒）もしくはms（ミリ秒）の単位を指定します。記述例は以下のようになります。

transition-delay: 秒数;

サンプルにホバーしてみてください。ホバーした瞬間から1秒後に要素が変化します。

<div class="perent">
  <div class="child">ホバーしてから1秒後に変化します</div>
</div>

.perent{
  border: 1px solid #000;
  height: 200px;
}

.child{
  transition-delay: 1s;
  background: orange;
  width: 30%;
  height: 100px;
}

.child:hover{
  width: 100%;
  height: 100%;
}

出力結果

transition-property

transition-propertyは、アニメーションさせたいプロパティを選択できる指定です。記述例は以下のようになります。

transition-property: プロパティ名;

サンプルにホバーしてみてください。背景色はホバーと同時に変化し、文字色のみ1秒かけて変化します。

<p>ホバーしてください</p>

p {
   transition-property: color;/*colorというプロパティのみを指定*/
   transition-duration: 1s;
   background: lightgray;
   padding: 30px;
   font-size: 20px;
}
 p:hover {
   color: #fff;
   background-color: orange;
}

出力結果

複数のプロパティを選択する場合

複数のプロパティを選択する場合はプロパティ名をカンマ（,）で区切って指定します。記述例は以下のようになります。

transition: プロパティ名, プロパティ名;

すべてのプロパティを選択する場合

すべてのプロパティを選択する場合はallという値を指定します。記述例は以下のようになります。

transition: all;/*すべてのプロパティに適用*/

allを使用するとすべてのプロパティにtransitionが適用されるため、想定していないアニメーションとなる可能性があります。予想外のエラーを防ぐためにプロパティの指定は一つずつ行うのが確実です。

transition-propertyは単体では動かないためdurationかdelayのどちらかもしくは両方を併用するようにしましょう。

transition-timing-function

transition-timing-functionはアニメーションの進行度合いを設定できるプロパティです。

おもな値は6種類あります。以下の表にわかりやすくまとめました。

それぞれがどのようなアニメーションをするのかサンプルで確認してみましょう。ホバーしたときにそれぞれの背景色が横に広がります。

<div class="transition">
  <div class="box ease">ease</div>
  <div class="box ease-in">ease-in</div>
  <div class="box ease-out">ease-out</div>
  <div class="box ease-in-out">ease-in-out</div>
  <div class="box linear">linear</div>
  <div class="box cubic-beizer">cubic-beizer</div>
</div>

/*全体的なスタイル*/
.box{
  text-align: center;
  background-color: orange;
  height: 30px;
  width: 30%;
  margin-bottom: 5px;
  transition-duration: 2s;
}

/*ホバー時のスタイル*/
.transition:hover .box{
  width: 100%;
}

/*それぞれの値*/
.ease{
  transition-timing-function: ease;
}

.ease-in{
  transition-timing-function: ease-in;
}

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

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

.linear{
  transition-timing-function: liner;
}

.cubic-beizer{
  transition-timing-function: cubic-bezier(0.25,0.1,0.25,0.1);
}

出力結果

transition-timing-functionも単体では動かないためdurationかdelayのどちらかもしくは両方を併用する必要があります。

cubic-bezierについて

cubic-bezierはアニメーションの進行度合いを自作できる指定方法です。ベジェ曲線という関数を用いて指定します。ベジェ曲線とは、X軸とY軸の座標上の2点を経由する原点から終了地点までを結んだ曲線のことです。

コードの書き方は以下のようになります。

transition-timing-function: ease;
 transition-timing-function: cubic-bezier(0.25,0.1,0.25,0.1);

ちなみに、この例の数値はeaseと同じ値です。

一括指定（ショートハンド ）

transitionの値は一括指定が可能です。このような指定の仕方をショートハンドといいます。記述例は以下のようになります。

transition: プロパティ 秒数 変化を遅らせる 進行度合い;
 transition: all 1s 0s ease;

指定の順番は特にありませんがdurationとdelayは先に記述した値がdurationとなるので注意しましょう。

ショートハンドでの指定では使わない値の記述を省略することができます。記述していない値には初期値が適用されます。

transition:　1s;
/*property・delay・timing-functionは省略しているため初期値が適用される*/

transitionとCSSアニメーションとの違い

アニメーションといえばCSSアニメーションが思い浮かんだ人もいるのではないでしょうか。transitionプロパティとCSSアニメーションの違いを簡単にまとめてみます。

transitionとcssアニメーションの違い

• transitionでは簡単な設定、CSSアニメーションは高度な設定が可能
• CSSアニメーションでは@keyframesの設定が必要
• transitionでは要素を変化させるための擬似クラスが必要

transitionでは簡単な設定、 CSSアニメーションでは高度な設定が可能CSSアニメーションを使うと、変化を秒数によって細かく刻んだりループさせたりなどの高度な設定ができます。transitionではここまで高度な設定はできませんがコードの記述が簡単というメリットがあります。

CSSアニメーションでは@keyframesの設定が必要CSSアニメーションを使うときは、@keyframesという設定が必要となります。0%〜100%の数値で開始時・中間地点・終了時の任意のタイミングで変化を切り替えるポイントを設定できる方法です。本格的なアニメーションを作成したいときに使用します。

transitionでは要素を変化させるための擬似クラスが必要transitionを使用するときには要素の状態を変化させるため、ホバー時（要素にカーソルを合わせたとき）やクリック時（要素をクリックしてから離すまで）などの状態を変化させる擬似クラスを使用する必要があります。

transitionを使うことが多い場面

ホバー時

この記事ではホバー時にtranstionを使ってアニメーションをつける方法を説明してきました。

ホバー時に出現するアニメーションはサイトの彩りやユーザーを楽しませる効果があります。そのため制作の現場ではホバーしたときのアニメーションとしてtransitionをよく使います。

.test{

}
.test:hover{
  /*ホバー時のアニメーション*/
}

クラスが追加・解除された時

JavaScriptを使うとclassを追加したり外したりすることができます。JavaScriptで動きをつけてtransitionでアニメーションの肉付けをする、という流れでclassの追加や解除を行ったときにもtransitionを使うことが多いです。

.test{

}

.test .class{
  /*.testに.classが追加されたときのアニメーション*/
}

transitionが効かない時のチェックポイント

transitionが効かないときのよくある設定ミスを2つ挙げてみました。
設定しているはずなのに、期待通り動作しない場合は以下の点で設定ミスがないか確認してみましょう。

displayプロパティにtransitionを設定している

要素の表示・非表示を切り替える際にdisplay: none;やdisplay: block;の切り替えをすることがよくあります。
そこで、表示の切り替えにアニメーションをつけるためtransitionを設定したとしても期待通りには動きません。

なぜならtransitionプロパティはdisplayプロパティには作用しないためです。

表示・非表示を切り替える際にアニメーションをつけたい場合は、visibilityやopacityプロパティを使用しましょう。

疑似クラスにtransitionの設定をしている

transitionプロパティを:hoverや:activeなど疑似クラスの方に指定すると期待通りの動作はしません。
正しく大元の要素にtransitionが設定されているか確認してみましょう。

チェックテスト

サンプルコード

<div class="parent">
 <div class="child">背景色が3秒かけて変化します</div>
</div>


<style>
 .child {
   background-color: red;
   width: 50%;
   height: 100px;
 }
</style>