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

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

検証環境

CSS

macOS

14.1

transition-property

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

トランジションは直訳で『変化』の意味で、スタイル変化に伴う振る舞いを設定するプロパティをtransition-propertyに指定します。

基本構文

transition-property: 値;

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

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

値

値はプロパティ名または全てのプロパティを表すallです。

サンプル

変化時間のtransition-durationプロパティを合わせて使用します。

次のサンプルは入力項目にフォーカスを当てると、input:focusのスタイルを適用します。

適用の際に、transition-propertyプロパティにbackgroundを設定したため、背景色は２秒かけて変化します。

sample.html

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

<input type="text">

プレビュー

位置は即座に変化しますが、leftプロパティを追加すると、位置も２秒かけて移動します。

sample.html

<style>
input {
    background: red;
    position: relative;
    left: 0;
    transition-duration: 2.0s;
    ___ih_diff_start
-    transition-property: background;
+    transition-property: background, left;
    ___ih_diff_end
}
input:focus {
    background: blue;
    left: 200px;
}
</style>

<input type="text">

プレビュー