transitionプロパティでtransition効果を指定することができます。transitionとは遷移という意味になります。 pなどのCSSセレクタと疑似クラスである :hoverに付けてCSSの外部ファイルで transitionと擬似クラスを組み合わせることで簡易なアニメーションのような動きを表示させることができます。

■ transitionのプロパティ

transitionの属性は以下の通り。

■ transition-duration

ボックスの上にマウスを置いてください。背景が緑色から２秒で青色に変わります。

【ブラウザ表示】

<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;}

<p style="transition:font-size 1.5s ease-in;" onclick="this.style.fontSize='30px'">
この文字をクリックすると大きくなります。
</p>

■ 細い枠線から太い枠線に

【ブラウザ表示】

細い枠線を太い枠線に

<p class="henka6" onmouseover="this.style.borderWidth='20px'">細い枠線を太い枠線に</p>

p.henka6{
border:1px solid blue;
transition:border 1.5s ease-in-out 3s;
}

<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;
}

<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>

スタイルシート一覧のページに戻る