■ ヒントだよ!HTML & CSS ■
■ 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>
© KinutaHandicraft