問題

22
HTML_CSS

CSSアニメーションを実装してみよう

この問題では、文字色をただ変更するだけではなくアニメーションを使ってゆっくり色を変える実装を行います。 チェックを入れた際に挙動を変えるlabel要素の使い方を思い出しましょう。

HTML_CSSの問題に挑戦しよう!

問題

CSSアニメーションを実装してみよう

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

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

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

transition: all 1s;
(all指定で全プロパティ対象)1sは、アニメーションにかける時間です。

補足

今回のようにクリックして文字色をアニメーションをつけて変化させるにはtransitionプロパティを使う必要があります。

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

transitionを使う場合は、トリガーとなるhoverやactiveのような疑似クラスが必要となります。疑似クラス内のスタイル設定が出来たら、変化前のスタイル設定をしてあるセレクタにtrasitionを指定します。
指定する際のプロパティ値は、ショートバンドでまとめて書くことができます。
設定できるプロパティは以下の4つです。
transition-property: CSS プロパティの名称、allで全部を指定
transition-duration:アニメーションが 完了するまでの時間
transition-timing-function:中間状態 を指定
transition-delay:はじまるまでの待ち時間

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET