4_4 transtionプロパティ

transition CSSプロパティは、CSS Transitionsアニメーションを指定するショートハンド(一括指定)プロパティです。

通常は、transition:につづけて、変化の発生を監視するプロパティ名、その後にアニメーションにかける時間(duration値)を記述するようにします。これは、ブラウザがtime値として最初に認識する値がアニメーションの長さになるからです。time値にはもう1つ、delay値が指定できるので、これが誤って、duration値と解釈されないように、duration値を2つめに指定するようにします。

time値は、単位としてs(秒)、ms(ミリ秒)を使用する時間の長さを表す値を言います。

ロングハンドプロパティ(ショートハンドでない、通常の書き方で指定するプロパティ)には、以下のものがあります。 ショートハンドプロパティを使おうにも、指定する値の意味を知らないことには指定できないので、まずはロングハンドプロパティを覚える必要があります。

ロングハンドプロパティ:初期値

transition-property:all

CSS Transitionアニメーションを適用するCSSプロパティ名を指定する。初期値はal(つまり適用可能なすべてのプロパティ)なので、特定のプロパティ名を指定しなくても、アニメーションは再生されるが、何を監視するのかを明確にする上で、指定しておいた方がよい。

transition-duration:0s

アニメーション1回にかける時間をtime値で指定する。s(秒)、ms(ミリ秒)の単位を必ずつける。小数値も使用できるが、負の値は意味をなさない。初期値は0sなので、何らかの値を指定しないと、アニメーションは再生されないことになる。

transition-timing-function:ease

アニメーションが指定された時間内で、どのように進行するかを、関数名で指定する。たとえばlinearは一定のスピード(定速)で進行する。指定する関数はタイミング関数、イージング関数と呼ばれ、多くの種類の関数が指定できる。

transition-delay:0s

アニメーションをどれだけ遅らせて(遅延させて)開始するかをtime値で指定する。初期値は0sなので、遅延せずに直ちにスタートする。3sは3秒後にスタートする。-1500msを指定すると、1500ミリ秒前にスタートしたものとして、1500ミリ秒後のアニメーションの途中からスタートする。

 

コメントを残す

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

CAPTCHA