■ ヒントになるのか？HTML ■

    topへ     前のページに戻る     ページ閉じる

■ transition関係
・transition-property - トラジッションを適用するプロパティーを指定する。
.box4 {
width:700px;
border: 1px solid red;
background-color: aqua;
}
.box4:hover {
transition-property: background-color;
background-color: yellow;
}
<div class="box4">
<p>ここにマウスを移動しましょう！</p>
</div>

・transition-duration - トランジッションが終了するまでの時間を指定する。
.box5 {
width:700px;
border: 1px solid red;
background-color: aqua;
}
.box5:hover {
transition-property: background-color;
transition-duration: 3s;
background-color: yellow;
} <div class="box5">
<p>ここにマウスを移動しましょう！</p>
</div>

・transition-timing-function - トランジッションの加速曲線を指定する。
.box6 {
width:700px;
border: 1px solid red;
background-color: aqua;
}
.box6:hover {
transition-property: background-color;
transition-duration: 6s;
transition-timing-function: steps(3,end);
background-color: yellow;
}
lt;div class="box6">
<p>ここにマウスを移動しましょう！</p>
</div>

・transition-delay - トランジッションが開始するまでの待ち時間をしてする。
.box7 {
width:700px;
border: 1px solid red;
background-color: aqua;
}
.box7:hover {
transition-property: background-color;
transition-delay: 3s;
background-color: yellow;
lt;div class="box7">
<p>ここにマウスを移動しましょう！</p>
</div>

    topへ     前のページに戻る     ページ閉じる