Tailwind CSS 練習問題 41：アニメーション（トランジション時間）
Tailwind CSSにおいて、ホバー時などのスタイル変化を滑らかにするため、トランジションの継続時間を300ミリ秒に設定したい場合、正しいクラスはどれか。
- `duration-300`クラスを使用して、継続時間を設定する。
- `transition-300`クラスを使用して、継続時間を設定する。
- `delay-300`クラスを使用して、継続時間を設定する。
- `animate-300`クラスを使用して、継続時間を設定する。
- `speed-300`クラスを使用して、継続時間を設定する。
正解と解説を見る
正解：`duration-300`クラスを使用して、継続時間を設定する。
Tailwind CSSでトランジション（＝状態変化時のアニメーション）の長さを指定する場合、`duration-300`が正解です。
【正解の理由】
`duration-{数値}`クラスは、CSSの`transition-duration`プロパティに対応しており、アニメーションが完了するまでの時間（ミリ秒単位）を設定します。
【不正解の理由】
• 「`transition-300`クラスを使用して、継続時間を設定する」は誤り。`transition`はトランジションの対象プロパティを指定するクラス名です
• 「`delay-300`クラスを使用して、継続時間を設定する」は誤り。開始を遅らせる時間（transition-delay）を設定するクラスです
• 「`animate-300`クラスを使用して、継続時間を設定する」は誤り。Tailwindにそのような標準クラスは存在しません
• 「`speed-300`クラスを使用して、継続時間を設定する」は誤り。Tailwindにそのような標準クラスは存在しません