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