https://teratail.com/questions/72976
CSSのアニメーションがIEで動作しない｜teratail
CSSでアニメーションを作成したのですが、IE11で動作しません。 いろいろ調べて、ハックを試してみたのですが、上手くいきませんでした。 ※Firefox・GoogleChromeでの動作は確認済みです。 解決方法があれば、ご教示頂けますと幸いです。 よろしくお願いいたします。 <!DO
teratail.com
CSSでアニメーションを作成したのですが、IE11で動作しません。
いろいろ調べて、ハックを試してみたのですが、上手くいきませんでした。
※Firefox・GoogleChromeでの動作は確認済みです。
解決方法があれば、ご教示頂けますと幸いです。
よろしくお願いいたします。
| <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*-- reset --*/ body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, blockquote { margin: 0; padding: 0; } /*-- base --*/ body { width: 100%; } ul { list-style-type: none; } img { vertical-align: bottom; border: 0; } /*-- main --*/ .wrap { width: 100%; max-width: 350px; margin: 0 auto; padding: 20px 0; font-size: 0; text-align: center; } .wrap li { position: relative; display: inline-block; width: 18%; margin: 2px; } .wrap .anime_key { animation: 4s ease-in-out 0s normal none infinite running badgebounce; opacity: 1 !important; } @keyframes anime_key { 0%, 8%, 100% { transform: scale(0.92); } 4%, 12%, 96% { transform: scale(1); } } @keyframes badgebounce { 0%, 8%, 100% { transform: scale(0.92); } 4%, 12%, 96% { transform: scale(1); } } </style> </head> <body> <ul class="wrap"> <li><img src="https://placehold.jp/cccccc/cccccc/65x65.png" class="anime_key"></li> <li><img src="https://placehold.jp/cccccc/cccccc/65x65.png" class="anime_key"></li> <li><img src="https://placehold.jp/cccccc/cccccc/65x65.png" class="anime_key"></li> <li><img src="https://placehold.jp/cccccc/cccccc/65x65.png" class="anime_key"></li> </ul> </body> </html> |
'JLPT' 카테고리의 다른 글
| ニューラルネットワーク研究開発職の募集 (0) | 2021.06.26 |
|---|---|
| Node.jsのフレームワーク「Express」とは【初心者向け】 (0) | 2021.06.26 |
| Events/jQuery.Event (0) | 2021.06.26 |
| パッケージマネージャを利用した Node.js のインストール (0) | 2021.06.26 |
| 正規表現の基本 (0) | 2021.06.26 |
댓글