問題
11クリックアニメーションを実装する
ボタンや画像をクリックしたときに動きが加わる演出は、どのように実装されているのでしょうか。
この問題では、クリックをきっかけに動くアニメーションの基本を学習します。
仕組みを理解することで、ユーザー操作に応じた表現を作れるようになります。
HTML/CSSの問題に挑戦しよう！
問題
「クリックアニメーションを実装する」
クリック操作をきっかけに動作するアニメーションを実装してみましょう。
対象要素をクリックしたときに、見本動画のような動きになるよう調整してください。
ユーザーの操作に応じたアニメーションの仕組みを理解することがポイントです。
期待する画面
解答と解説（クリックアニメーションを実装する）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
クリックアニメーションはJavaScriptで実装することも多いですが、この問題ではCSSのみで実現しています。
ポイントは「inputのchecked状態」と「labelの連動」です。
まず、type="checkbox"のinputとlabelをfor属性で紐づけることで、labelクリック時にchecked状態が切り替わります。
これにより、クリックされたかどうかをCSSだけで判定できます。
次に擬似クラス「:checked」を使い、チェックされたときに特定の要素へスタイルを適用します。
今回のように input:checked ~ .stamp-box > .test と書くことで、クリック後にアニメーションが発動します。
初期状態では、transformでscaleやrotateを指定して拡大・傾けた状態にし、opacityとvisibilityで非表示にします。
クリック後は元のサイズと角度に戻しつつ表示させることで、自然なアニメーションになります。
この変化を滑らかにするのがtransitionです。
このように「初期状態→変化後」を定義し、transitionでつなぐのが基本です。
CSSだけで実装できるため、軽量でシンプルな点もメリットです。
補足
このアニメーションはCSSのみで実装しています。
inputのchecked状態とlabelを連動させ、:checkedでスタイルを切り替えます。
transformやopacityを使い、クリック時の動きを表現します。
JavaScript不要で実装できるのが特徴です。
・フェーズごとに変化するアニメーションも学びたい方：フェーズ毎のアニメーションを実装しよう
・クリックで要素を回したり止めたりしたい方：クリックしたら要素を回したり止めたりしよう
・CSSアニメーションをさらに深めたい方：CSSアニメーション問題集
ポイント
クリック操作で動くCSSアニメーションの基本
CSSでのクリックアニメーションは、ユーザーのクリック操作に応じて要素の状態を変化させる仕組みです。
JavaScriptを使わずに、inputのchecked状態と:checked擬似クラスを組み合わせることでクリックを検知し、スタイルの切り替えを行います。
この仕組みにより、transformやopacityなどのCSSプロパティを使ってクリック前後の見た目を変化させることができます。
CSSだけでインタラクティブなUIを実現できる点がこの実装のポイントです。
