【CSS】transition-delay - トランジション効果の遅延
CSSのtransition-delayプロパティをご紹介します。
transition-delay
transition-delayはトランジション効果開始までの遅延を示すプロパティです。
トランジション効果はプロパティが変化する時のアニメーションです。
基本構文
transition-delay: 値;複数値はカンマ（,）で区切ります。
transition-delay: 値 値 値;サンプル
<style>
div {
width: 200px;
height: 1.0em;
position: relative;
}
input {
background: #F5AEC2;
position: absolute;
top: 0;
left: 0;
transition-duration: 3.0s;
transition-property: background, left;
transition-delay: 1.0s, 4.0s;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>
