【CSS】transition-timing-function - トランジション効果の速度
CSSのtransition-timing-functionプロパティをご紹介します。
transition-timing-function
transition-timing-functionはトランジション効果の速度を示すプロパティです。
トランジション効果はプロパティが変化する時のアニメーションです。
基本構文
transition-timing-function: 値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| ease | 変化時間半ばまで加速し、最後は遅くなります。 |
| liner | 均等速度 |
| ease-in | 加速し続けます。 |
| ease-out | 減速し続けます。 |
| ease-in-out | ゆっくり開始し、ゆっくり終了します。 |
サンプル
ease
<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-timing-function: ease;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>liner
<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-timing-function: liner;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>ease-in
<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-timing-function: ease-in;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>ease-out
<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-timing-function: ease-out;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>ease-in-out
<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-timing-function: ease-in-out;
}
input:focus {
background: #AEE5F5;
left: 100%;
}
</style>
<div>
<input type="text">
</div>
