【CSS】transition - トランジション

CSSのtransitionプロパティをご紹介します。

検証環境

CSS

macOS

14.1

transition

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

トランジションの対象プロパティや時間、速度、遅延を一括設定します。

各項目の個別設定はtransition-property、transition-duration、transition-timing-function、transition-delayを使用します。

【CSS】transition-property - トランジションの対象プロパティ

【CSS】transition-duration - トランジションの時間

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

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

基本構文

transition: 対象プロパティ 時間 速度 遅延;

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

transition: 対象プロパティ 時間 速度 遅延, 対象プロパティ 時間 速度 遅延;

サンプル

sample.html

<style>
input {
    background: red;
    position: relative;
    top: 0;
    left: 0;
    transition: background 2.0s ease-in 2.0s, left 2.0s ease-out 0s;
}
input:focus {
    background: blue;
    left: 200px;
}
</style>

<input type="text">

プレビュー