@ CSS

transition プロパティ

transition プロパティは、transition 効果(時間的変化)を一括して指定するプロパティです。

format

transition: transition-property transition-duration transition-timing-function transition-delay;

transition プロパティの parameta は下記のとおりです。

  • transition-property: トランジションの対象とする CSS プロパティ
  • transition-duration:トランジションを実行する時間。省略した場合は “0”(通常単位は “s” : 秒)
  • transition-timing-function:トランジションが実行されるスピード変化を表すキーワード。省略した場合は “linear”
  • transition-delay:実際に トランジションが開始されるまでの遅延時間。省略した場合は “0”(通常単位は “s” : 秒)
定義済みのキーワード
キーワード 説明
ease ゆっくり加速、ゆっくり減速する
linear 一定の割合で変化する
ease-in ゆっくり加速する
ease-out ゆっくり減速する
ease-in-out 最初と最後の変化を穏やかにする

キーワードのほかに、”cubic-bezier()” を使用して独自のベジエ曲線を指定することも可能です。

example

transition: font-size 0.5s ease-out 1s;

次の例では、文字列に hover すると、font-size プロパティの値が 500% に変化するように <h1> 要素へ設定しています。

property_transition_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
h1 {
  font-size: 200%;
  transition: font-size 0.5s ease-out 1s;
}
h1:hover {
  font-size: 500%;
  transition: font-size 0.5s ease-in 1s;
}
</style>
</head>

<body>
  <h1>zoom</h1>
</body>

<html>

demo

CSS トランジション関連サイト