キリウ君が読まないノート 作 ▸
CSS transitionの行きと帰りの時間を変える
マウスオーバー時はすぐに色が変わって、離れた時はゆっくり色が戻るみたいな
以下のように、transition-duration を元のスタイルと変化後のスタイルの両方に設定すればできる。
元のスタイルに設定した方が帰り (変化後→元) にかかる時間で、変化後のスタイルに設定した方が行き (元→変化後) にかかる時間となる。
/* 元のスタイル */
.example {
background-color: #ddd;
transition-property: background-color;
transition-duration: 1s; /* hover → 通常 */
}
/* 変化後のスタイル */
.example:hover {
background-color: #f88;
transition-duration: 0.2s; /* 通常 → hover */
}サンプル
マウスオーバー時はすぐ色が変わって、離れた時はゆっくり色が戻る。
See the Pen transition-duration by napoporitataso (@napoporitataso) on CodePen.