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>

退会済みユーザー

2017/04/19 01:38

IE のバージョンぐらいは書いてください。

scoa

2017/04/19 02:54

申し訳ございません。IE11です。

行動規範の内容に同意します

回答2件

animation-play-stateの初期値であるrunningを消してみてください

こちらで検証してみました。IE11では下のボックス群が動きません。
https://codepen.io/mattari-panda/pen/oWbNNq

情報の正確性は担保できないのですが、StackoverflowにIE11のバグではないかという投稿がありました。
http://stackoverflow.com/questions/34809544/css3-animation-is-not-working-in-ie11-but-works-in-other-browsers

ちなみに

ご存知かと思うのですが、CSSプロパティの初期値は省略することが出来ます

投稿2017/04/19 03:45

mattari_panda

総合スコア429

ベストアンサー

手元環境で下記で動きました。IEはショートハンドが失敗することがあるようです。
animation-play-state: running; はデフォルト値なので不要だと思いますが、一応書いておきました。

CSS
1/*
2animation: 4s ease-in-out 0s normal none infinite running badgebounce;
3                                                    ↓                  */
4animation: 4s ease-in-out 0s normal none infinite badgebounce;
5animation-play-state: running;