Q&A
ryuuta さん>
質問が解決済みになったようですが、どのように解決したのか、もしよければ教えていただけませんか？
ユーザーがアクセスした際、CSSで親要素の背景画像が拡大して
その子要素はアニメーションさせたくないと考えており、
タグを書いてみたのですが、アニメーション初心者ということもあり、
子要素も親要素と同じように拡大してしまいます。
子要素に別のアニメーション名をつけて拡大しない設定にしてみたのですが
どうやら違うようで大変困っております。
お手数ですがどなたかご教示いただければ幸いです。
<!DOCTYPE html> <html lang="en"> <head> <title>test</title> <style> .box1 {width: 500px; height:500px; overflow:hidden;} .boxInnner01 {background-image: url(img/main.jpg);background-size: cover; width:100%; height:100%; animation: my_anime01 3s;} .boxInnner02 {animation: my_anime02; text-align:center;} @keyframes my_anime01 { 100% { transform:scale(1.1,1.1)} } @keyframes my_anime02 { 100% { transform:scale(1.0,1.0);} } </style> </head> <body> <div class="box1"> <div class="boxInnner01"> <div class="boxInnner02"><br><br><br>aaaaa</div> </div> </div> </body> </html>
よろしくお願いいたします。
回答1件
0
ベストアンサー
CSSだけでは難しそうです。
CSS変換スケール、子要素をスケールしない | 翻訳QAサービス | code adviser
HTMLの方で、アニメーションさせたくない要素を親要素の外に配置する必要がありそうです。
投稿2019/12/20 13:45
総合スコア34073
あなたの回答
tips
プレビュー
