CSS基礎 練習問題 33：CSSトランジション（アニメーションの時間指定）
CSSアニメーションで要素の状態を滑らかに変化させたい場合に、プロパティの変化にかける時間を指定するために使う正しいプロパティはどれか。
- .box { transition-duration: 0.3s; }
- .box { animation-length: 0.3s; }
- .box { transform-time: 0.3s; }
- .box { transition-speed: 0.3s; }
- .box { duration: 0.3s; }
正解と解説を見る
正解：.box { transition-duration: 0.3s; }
トランジション（＝CSSプロパティの値が変化する際にその過程を滑らかに見せる仕組み）において、変化にかかる時間を指定するプロパティは「transition-duration」である。
【正解の理由】
「transition-duration」はトランジションの効果が完了するまでの時間を秒（s）またはミリ秒（ms）単位で指定する正式なプロパティである。
【不正解の理由】
• 「animation-length」：CSSにこのようなプロパティは存在しない（アニメーションの時間には「animation-duration」を使う）
• 「transform-time」：CSSにこのようなプロパティは存在しない。transformは要素の変形（回転・拡大等）を指定するプロパティであり時間指定は行わない
• 「transition-speed」：CSSにこのようなプロパティは存在しない
• 「duration」：単体のプロパティとしては存在せず、「transition-duration」や「animation-duration」のように接頭辞が必要