【CSS】transition - トランジション効果の設定
CSSのtransitionプロパティをご紹介します。
transition
transitionはトランジション効果の一括設定プロパティです。
トランジション効果はプロパティが変化する時のアニメーションです。
適用プロパティや時間、速度、遅延を個別に設定するにはtransition-property、transition-duration、transition-timing-function、transition-delayを使用します。
基本構文
transition: 適用プロパティ 時間 速度 遅延;複数値はカンマ（,）で区切ります。
transition: 適用プロパティ 時間 速度 遅延, 適用プロパティ 時間 速度 遅延;サンプル
<style>
div {
width: 200px;
height: 1.0em;
position: relative;
}
input {
background: #F5AEC2;
position: absolute;
top: 0;
left: 0;
transition: background 2.0s ease-in 2.0s, left 2.0s ease-out 0s;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>
