transition
transition
は CSS のプロパティで、 transition-property
、 transition-duration
、 transition-timing-function
、 transition-delay
の一括指定プロパティです。
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* 1 つのプロパティへの適用 */
/* プロパティ名 | 所要時間 */
transition: margin-right 4s;
/* プロパティ名 | 所要時間 | 待ち時間 */
transition: margin-right 4s 1s;
/* プロパティ名 | 所要時間 | イージング関数 */
transition: margin-right 4s ease-in-out;
/* プロパティ名 | 所要時間 | イージング関数 | 待ち時間 */
transition: margin-right 4s ease-in-out 1s;
/* 2 つのプロパティへの適用 */
transition:
margin-right 4s,
color 1s;
/* 変化するすべてのプロパティへの適用 */
transition: all 0.5s ease-out;
/* グローバル値 */
transition: inherit;
transition: initial;
transition: revert;
transition: unset;
transition
プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、カンマで区切って指定します。
それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である all
および none
) に適用されるトランジションを記述します。記述は以下の通りです。
- トランジションを適用するプロパティを表す 0 ~ 1 個の値。以下のうちの一つです。
none
キーワードall
キーワード- CSS プロパティの名前である
<custom-ident>
- 使用するイージング関数を表す 0 または 1 個の
<easing-function>
の値 - 0 ~ 2 個の
<time>
の値。 1 番目の値はtransition-duration
に割り当てられる所要時間として解釈され、 2 番目の値はtransition-delay
に割り当てられる待ち時間として解釈されます。
プロパティ値の一覧が同じ長さではない場合については、プロパティ値のリストの長さが異なる場合を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。
公式定義
初期値 | 一括指定の次の各プロパティとして |
---|---|
適用対象 | すべての要素、::before / ::after 擬似要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | アニメーション不可 |
形式文法
transition =
<single-transition>#
<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>
<single-transition-property> =
all |
<custom-ident>
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
例
単純な例
この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。
HTML
html
<a class="target">この上にポインターを移動してください</a>
CSS
css
.target {
font-size: 14px;
transition: font-size 4s 1s;
}
.target:hover {
font-size: 36px;
}
結果
CSS トランジションの使用 の記事に、 CSS トランジションの例がいくつかあります。
仕様書
Specification |
---|
CSS Transitions # transition-shorthand-property |
ブラウザーの互換性
BCD tables only load in the browser