transitionプロパティでtransition効果を指定することができます。transitionとは遷移という意味になります。
pなどのCSSセレクタと疑似クラスである :hoverに付けてCSSの外部ファイルで
transitionと擬似クラスを組み合わせることで簡易なアニメーションのような動きを表示させることができます。
■ transitionのプロパティ
transitionの属性は以下の通り。
属性 |
説明 |
transition-duration
|
変化が終了するまでの時間を指定 |
transition-delay
|
変化が開始するまでの秒数 |
transition-property
|
変化させたいプロパティ |
transition-timing-function
|
変化の進行度
ease・・・開始と終了を滑らかにする 初期値
linear・・・一定の速さで再生する
ease-in・・・ゆっくり始まる
ease-out・・・ゆっくり終わる
ease-in-out・・・ゆっくり始まりゆっくり終わる
cubic-bezier(X1,X2,Y1,Y2)・・・3次ベジェ曲線で4つの数値(0~1)で指定する
|
■ transition-duration
ボックスの上にマウスを置いてください。背景が緑色から2秒で青色に変わります。
【ブラウザ表示】
背景緑から青
ソース
<div class="henka1">背景緑から青</div>
外部ファイル
div.henka1{
width:100px;
height:50px;
background-color:green;
transition-duration:2s;
}
div.henka1:hover{background-color:blue;}
■ transition-delay
box内にマウスを置いてください。3秒経過してから色の変化が始まります。外部ファイルの
sは秒のことです。
背景緑から青
ソース
<div class="henka2">背景緑から青</div>
外部ファイル
div.henka2{
width:100px;
height:50px;
background-color:green;
transition-delay:3s;
}
div.henka2:hover{background-color:blue;}
■ transition-property
変化の対象を枠線の色と枠線の太さだけに設定しています。
ピンク色の枠線無しのボックスの上にマウスを置いてください。枠線の色と枠線の太さだけ
10秒かけて変化します。
背景色や枠線の種類はマウスを乗せた瞬間に変わりトランジション効果は発動していないのが分かります。
緑の実線が付いて太くなり背景が白色になります。
ソース
<div class="henka3">緑の実線が付いて太くなり背景が白色になります。</div>
外部ファイル
div.henka3{
width:200px;
height:50px;
background-color:pink;
transition-duration:10s;
transition-property:border-color,border-width;
}
div.henka3:hover{
border-style:solid;
border-color:green;
border-width:8px;
background-color:white;
}
■ transition-timing-function
ボックスの上にマウスを置いてください。ゆっくりと高さが低くなっていきます。
ゆっくり始まる
ソース
<div class="henka4">ゆっくり始まる</div>
外部ファイル
div.henka4{
width:100px;
height:50px;
background-color:pink;
transition-duration:5s;
transition-timing-function:ease-in;
}
div.henka4:hover{
height:10px;
background-color:pink;
}
■ トランジション効果を一括で指定
{transition:変化の対象 秒数 変化の進行度 変化が開始するまでの秒数;}で
トランジション効果を一括で指定できます。
下の例では変化の対象はフォントサイズで文字をクリックすると1.5秒かけて最初はゆっくりと大きくなり
だんだん早く大きくなり30pxになります。
【ブラウザ表示】
この文字をクリックすると大きくなります。
ソース
<p class="henka5" onclick="this.style.fontSize='30px'">
この文字をクリックすると大きくなります。
</p>
外部ファイル
p.henka5{transition:font-size 1.5s ease-in;}
<body>~</body>に直接記入する場合
<p style="transition:font-size 1.5s ease-in;" onclick="this.style.fontSize='30px'">
この文字をクリックすると大きくなります。
</p>
■ 細い枠線から太い枠線に
細い枠線から太い枠線になります。
下の例では秒数を2つ指定しているので
青い枠線の上にマウスを置いて3秒後に変化が始まり1.5秒間かけてゆっくり太くなりゆっくりと止まります。
【ブラウザ表示】
細い枠線を太い枠線に
ソース
<p class="henka6" onmouseover="this.style.borderWidth='20px'">細い枠線を太い枠線に</p>
外部ファイル
p.henka6{
border:1px solid blue;
transition:border 1.5s ease-in-out 3s;
}
<body>~</body>に直接記入する場合
<p style="border:1px solid blue; transition:border 1.5s ease-in-out 3s;"
onmouseover="this.style.borderWidth='20px'">細い枠線を太い枠線に</p>
■ 回転
青い枠線上をダブルクリックしてください。丸い円が一定の速さで回転します。
【ブラウザ表示】
丸い円が回転
ソース
<p class="henka7" ondblclick="this.style.transform='rotate(20deg)'">丸い円が回転</p>
外部ファイル
p.henka7{
border:1px solid blue;
width:200px;
height:200px;
border-radius:50%;
transition:transform 1.5s linear;
}
<body>~</body>に直接記入する場合
<p style="border:1px solid blue; width:200px; height:200px; border-radius:50%;
transition:transform 1.5s linear;"
ondblclick="this.style.transform='rotate(20deg)'">丸い円が回転</p>
スタイルシート一覧のページに戻る
|