← クエスト一覧

クエスト31：transitionでなめらか変化

スライド 1 / 2

コーデ

💻 コード例

実行結果

今回の課題

ボタンにホバーしたとき、背景色がなめらかに変わるようにしよう！

📖 解説を見る

✨ CSS transitionでアニメーション！

transition でプロパティの変化をなめらかにできるよ！
transition: プロパティ時間イージング;

ヒントを見る

.btn に transition: background-color 0.3s ease; を追加しよう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

次へ →

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: transition の時間を 0.5s に変えてみよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: ホバー時に transform: scale(1.1) も追加しよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: transition: all 0.3s ease で全プロパティを対象にしよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

コピーしました！