【CSS】transition-timing-function - トランジションの速度

CSSのtransition-timing-functionプロパティについて解説します。

検証環境

CSS

macOS

14.1

transition-timing-function

transition-timing-functionは“トランジションの速度”のプロパティです。

基本構文

transition-timing-function: 値;

複数値はカンマ（,）で区切ります。

transition-timing-function: 値1, 値2, 値3;

値

代表的な値は次の通りです。

値	意味
ease	変化時間半ばまで加速し、最後は遅くなります。
linear	均等速度
ease-in	加速し続けます。
ease-out	減速し続けます。
ease-in-out	ゆっくり開始し、ゆっくり終了します。

サンプル

ease

sample.html

<style>
div {
    width: 200px;
    height: 1.0em;
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 3.0s;
    transition-property: left;
    ___ih_hl_start
    transition-timing-function: ease;
    ___ih_hl_end
}
input:focus {
    left: 100%;
}
</style>

<div>
    <input type="text">
</div>

プレビュー

linear

sample.html

<style>
div {
    width: 200px;
    height: 1.0em;
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 3.0s;
    transition-property: left;
    ___ih_hl_start
    transition-timing-function: linear;
    ___ih_hl_end
}
input:focus {
    left: 100%;
}
</style>

<div>
    <input type="text">
</div>

プレビュー

ease-in

sample.html

<style>
div {
    width: 200px;
    height: 1.0em;
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 3.0s;
    transition-property: left;
    ___ih_hl_start
    transition-timing-function: ease-in;
    ___ih_hl_end
}
input:focus {
    left: 100%;
}
</style>

<div>
    <input type="text">
</div>

プレビュー

ease-out

sample.html

<style>
div {
    width: 200px;
    height: 1.0em;
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 3.0s;
    transition-property: left;
    ___ih_hl_start
    transition-timing-function: ease-out;
    ___ih_hl_end
}
input:focus {
    left: 100%;
}
</style>

<div>
    <input type="text">
</div>

プレビュー

ease-in-out

sample.html

<style>
div {
    width: 200px;
    height: 1.0em;
    position: relative;
}
input {
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 3.0s;
    transition-property: left;
    ___ih_hl_start
    transition-timing-function: ease-in-out;
    ___ih_hl_end
}
input:focus {
    left: 100%;
}
</style>

<div>
    <input type="text">
</div>

プレビュー

複数値

sample.html

<style>
div {
    width: 200px;
    height: 1.0em;
    position: relative;
}
input {
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    transition-duration: 3.0s;
    transition-property: background, left;
    ___ih_hl_start
    transition-timing-function: ease-in, linear;
    ___ih_hl_end
}
input:focus {
    background: blue;
    left: 100%;
}
</style>

<div>
    <input type="text">
</div>

プレビュー