ywork2020.com

Title

要素のCSSプロパティ値を遷移する

目次 (INDEX)

transitionとは

ここで説明するtransition とは次の語句からなるCSSのプロパティです。
transition
読み: トランジション
意味: 変更、変化、変更、遷移(移り変わること)

目次に戻る

transitionプロパティの概要

このプロパティは要素のCSSプロパティの値を変化させ、2つの状態に遷移させることができます。

2つの状態は :hover や :active のような疑似クラスで定義するか、JavaScriptを使用して動的に設定する方法が考えられます。

transitionは次の個別プロパティで設定する値を一括で設定できる総合プロパティです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{transition: [Property] [Duration] [Delay] [Timing-function];}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルではdiv要素を使います。 また、div:hoverとdiv:activeのセレクタでトランジション効果が開始されるように設定しています。 つまり、マウスポインタが要素の上に乗っている状態で widthheight の変更効果が現れ、 要素をクリックしている状態で border-radius の変更効果が現れることになります。

トランジションの対象となるプロパティは、あらかじめ以下のように設定しています。

div{
	width: 100px;
	height: 100px;
	border-radius: 0%;
}
div:hover{
	width: 200px;
	height: 200px;
}
div:active{
	border-radius: 50%;
}

初期値: all 0s 0s ease

初期値の all 0s 0s ease は下記の個別プロパティの初期値を当てはめたものです。

  • transition-property: all; トランジション効果の対象となるプロパティを指定します。
  • transition-duration: 0s; トランジションが完了するまでの時間を指定します。
  • transition-delay: 0s; トランジションが開始されるまでの待機時間を指定します。
  • transition-timing-function: ease; トランジション中のタイミングを指定します。
div要素

div{transition: all 0s 0s ease;}

目次に戻る

Property値: トランジションの対象プロパティを指定

トランジションの対象となるプロパティを指定する場合はPropertyの値を設定します。 これは個別プロパティの transition-property を設定することと同じです。

ここで複数のプロパティをを名指し指定する場合はカンマ区切りで設定を列挙します。

div要素

div{transition: width 1s, height 2s, border-radius 1.5s;}

目次に戻る

Duration値: 変更時間の指定

トランジションに掛かる時間を指定するためにはDurationの値を設定します。 これは個別プロパティの transition-duration を設定することと同じです。

指定単位は秒(s)、またはミリ秒(ms)で指定します。

Durationの初期値は0sなので設定しない場合は瞬時にトランジションが完了するため、アニメーションとしての効果は期待できません。

div要素

div{transition: all 1s;}

目次に戻る

Delay値: 変更開始までの待機時間の指定

トランジションが開始されるまでの待機時間を指定するためにはDelayの値を設定します。 これは個別プロパティの transition-delay を設定することと同じです。

指定単位は秒(s)、またはミリ秒(ms)で指定します。

ここではDelay値に 0.5s を指定しているので0.5秒後にトランジションが開始されます。

transitionプロパティでは「変更完了時間 = Duration」と「開始までの待機時間 = Delay」を同時に設定することになるため、 コード中の先に記述した時間値をDurationとして認識し、後に記述した時間値をDelayと認識します。

div要素

div{transition: all 1s 0.5s;}

目次に戻る

Timing-function: 変更中のタイミングの指定

トランジションの実行中に値が変更されるタイミングを指定するためにはTiming-functionの値を設定します。 これは個別プロパティの transition-timing-function を設定することと同じです。

ここではTiming-function値にsteps関数を使用しています。 引数の (5, jump-none) は5段階の均一ステップでトランジションします。

div要素

div{transition: all 1s steps(5, jump-none);}

下記にtiming-functionに指定できるキーワード値と関数値を一覧表として掲載しておきます。

timing-function説明
[キーワード]
ease
初期値です。
アニメーションの最初と終わりは滑らかな動きになります。
cubic-bezier(0.25, 0.1, 0.25, 1.0)を指定した場合も同じ動きになります。
[キーワード]
linear
一定の速度でアニメーションが進行します。
cubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ動きになります。
[キーワード]
ease-in
始めはゆっくりアニメーションし終わりになるにつれて加速します。
cubic-bezier(0.42, 0, 1.0, 1.0)と同じ動きになります。
[キーワード]
ease-out
始まりの速度は速く徐々に減速しながらアニメーションします。
cubic-bezier(0, 0, 0.58, 1.0)と同じ動きになります。
[キーワード]
ease-in-out
最初と最後はゆっくりアニメーションし、中盤は加速します。
cubic-bezier(0.42, 0, 0.58, 1.0)と同じ動きになります。
[キーワード]
step-start
アニメーション開始時から終了の状態になります。
steps(1, jump-start)と同じ動きになります。
[キーワード]
step-end
アニメーションが終了するまでの時間はアニメーションはされずアニメーションの最後に終了の状態になります。
steps(1, jump-end)と同じ動きになります。
[関数]
cubic-bezier(p1, p2, p3, p4)
このタイミング関数は3次ベジェ曲線を定義します。
[関数]
steps( n, <jumpterm>)
ステップ関数または段階関数と言われコマ送りのようにステップさせることができます。 ステップ数を指定することで等間隔に区切ることができます。

nにはステップ数を指定します。

引数のキーワード<jumpterm>
  • jump-start: 分割された各アニメーションステップの最初の位置のアニメーションを表示します。 ただし、最初のステップは飛ばします。
  • jump-end: 分割された各アニメーションステップの終了の位置のアニメーションを表示します。 ただし、最後のステップは飛ばします。
  • jump-both: jump-startとjump-endの両方の特性を併せ持っています。 最初のステップと最後のステップを含まずに、それ以外のところで効果的にステップします。
  • jump-none: トランジション開始から完了まで均一にステップが行われます。

目次に戻る

グローバル値

transitionプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のall 0s 0s easeに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{transition: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックし、サンプルにマウスポインターを当てるとCSSが反映されます。

transition: initial;

transition: border-radius 1s;

transition: border-radius 1s 0.5s;

transition: border-radius 1s 0s ease;

transition: border-radius 1s 0s linear;

transition: border-radius 1s 0s cubic-bezier(0.7, 0, 0.84, 0);

transition: border-radius 1s steps(5, jump-none);

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る