ログイン

問題22 クリックして文字色アニメーションを実装しよう

HTML_CSSの問題

HTML_CSS

チェックを入れた際に挙動を変えるやり方は覚えていますか? 中級十とひとつ前の問題を参考にしながら実装してみましょう!

クリックして文字色アニメーションを実装しよう

問題

クリックして文字色をアニメーションで変えましょう。

動画を参考にして、実装してください。

期待する画面

コードのアイコン

解答ソースコード

              <input type="checkbox" id="image" name="head">
<label for="image">この文字を青から赤に変えよう</label>
¥HTML¥
            
              label {
  color: blue;
  transition: all 1s;
}
input:checked + label {
  color: red;
}
¥CSS¥
            
答えのアイコン

解説

checkdを利用して、擬似クリックイベントを発火しましょう。

要素のステータス(今回の場合checkd)
変更時のアニメーションはtransitionが有効です。

transition: all 1s;
(all指定で全プロパティ対象)1sは、アニメーションにかける時間です。
ログインして解答を見る
今回のようにクリックして文字色をアニメーションをつけて変化させるにはtransitionプロパティを使う必要があります。

transitionプロパティの使い方について簡単に解説しておきます。

transitionを使う場合は、トリガーとなるhoverやactiveのような疑似クラスが必要となります。疑似クラス内のスタイル設定が出来たら、変化前のスタイル設定をしてあるセレクタにtrasitionを指定します。
指定する際のプロパティ値は、ショートバンドでまとめて書くことができます。
設定できるプロパティは以下の4つです。
transition-property: CSS プロパティの名称、allで全部を指定
transition-duration:アニメーションが 完了するまでの時間
transition-timing-function:中間状態 を指定
transition-delay:はじまるまでの待ち時間
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!