問題
11
HTML_CSS
スタンプアニメーションを実装しよう
HTML_CSSの問題に挑戦しよう!
問題
「スタンプアニメーションを実装しよう」
クリックするとスタンプアニメーションを展開しよう!
見本を動画を参考に作成してください。
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
スタンプアニメーションを実装する際は
クリックする前のデフォルト時に transform: scale(10) rotate(-30deg);の様にして拡大しつつ要素を斜めにして待機させておく。
opacityとvisibilityにてアニメーションを実行する事で実装が実現できる。
※ブラウザのリロード実行時にアニメーションが走ってしましますが...対策としては、何かしらのscriptを実行するか、マルチクラスの付け外しのアニメーションではないとできない模様です。