最終更新日 2021年6月21日

transitionプロパティ

transitionは、遷移関連プロパティをまとめて指定するショートハンドプロパティです。

transition-property、transition-duration、transition-timing-function、transition-delayの順番で、各プロパティの値を半角スペースで区切って並べます。

複数指定する場合は、値のセットをカンマで区切ります。

CSS3での変更点

・transitionは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
各プロパティの初期値	すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ	なし

値	説明
transition-propertyの値	遷移させるプロパティを指定します。
transition-durationの値	変化にかける時間を指定します。
transition-timing-functionの値	変化中の速度に緩急をつけます。
transition-delayの値	遷移の開始を遅らせます。

サンプルコード

transition: color 10s linear 5s;
transition: background-color 20s ease-in 8s;
transition: color 10s linear 5s, background-color 20s ease-in 8s;

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。