← クエスト一覧

クエスト12:transitionで動きをつけよう

スライド 1 / 2
コーデ
💻 コード例
実行結果
← クエスト一覧
🌐 HTML & CSS / Quest 12 / 50

クエスト12:transitionで動きをつけよう

応用 +10 XP
🏠
今回の課題
ボタンに0.3秒びょうのなめらかな色変化いろへんかをつけよう!
📖 解説を見る
🎬 滑なめらかに変化へんかさせよう!

transition を使つかうと、スタイルの変化へんかをなめらかにできます。

✏️ 書かき方かた:
button {
  background: blue;
  transition: background 0.3s ease;
}
button:hover {
  background: red;
}


⚠️ ポイント:
・transition: プロパティ 時間 タイミング
・時間は 0.3s(0.3秒びょう)のように書かく
・all を使つかうと全部ぜんぶのプロパティに適用てきようできる
ヒントを見る
transition: background-color 0.3s ease; を button に書こう!
📄 見本
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
正解!見本と同じになりました。
次へ →
🏠 ホームへ

れんしゅうもんだい

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

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

未挑戦

問題 1: transition: all 0.5s でボックスが大おおきくなるエフェクトを作つくろう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
未挑戦

問題 2: opacity(透明度とうめいど)を使つかってホバーで薄うすくなるエフェクトを作つくろう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
未挑戦

問題 3: 3つの違ちがう速度そくど(0.1s / 0.5s / 1s)でtransitionするボタンを3つ作つくろう!(自由じゆう回答かいとう)

🖼 プレビュー
実行結果
実行できたよ!
もう一度チャレンジ!
コピーしました!