【CSS】transition-delay - トランジションの遅延

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

検証環境

CSS

macOS

14.1

transition-delay

transition-delayは“トランジションの遅延”のプロパティです。

トランジション（変化）の開始を設定秒数だけ遅延します。

基本構文

transition-delay: 値;

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

transition-delay: 値1, 値2, 値3;

サンプル

sample.html

<style>
input {
    background: red;
    position: relative;
    top: 0;
    left: 0;
    transition-duration: 2.0s;
    transition-property: background, left;
    ___ih_hl_start
    transition-delay: 1.0s, 4.0s;
    ___ih_hl_end
}
input:focus {
    background: blue;
    left: 200px;
}
</style>

<input type="text">

プレビュー