Q&A
試してみたらできました！
ありがとうございます！
ただ、デベロッパー画面でみると、各項目に横線が入って、効いていない状態のままなんですよね。
なんでだろう...
CSSだけで動くキラっと光るアイコンを作ったのですが
下記コードがIE環境下だと上手く動きません。
HTML
1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<style media="screen"> 7/* --- Newアイコン 20170429--- */ 8span.newIcon-a{ 9display: block; 10font-size: 14px; 11height: 19px; 12width: 56px; 13padding: 2px 3px; 14margin-left: 20px; 15display: block; 16position: relative; 17z-index: 2; 18overflow: hidden; 19border-radius: 5px; 20background-color: #FEBC01; 21color: #ffffff; 22text-align: center; 23text-decoration: none; 24cursor: default; 25transition: .25s linear; 26-webkit-transition: .25s linear; 27-moz-transition: .25s linear; 28} 29span.newIcon-a::before { 30display: block; 31position: absolute; 32z-index: -1; 33left: -30%; 34top: -50%; 35content: " "; 36width: 30px; 37height: 100px; 38transform: rotate(30deg); 39-webkit-transform: rotate(30deg); 40-moz-transform: rotate(30deg); 41background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 42background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); 43background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); 44animation: shiny 3s infinite linear; 45-webkit-animation: shiny 3s infinite linear; 46-moz-animation: shiny 3s infinite linear; 47} 48@media all and (-ms-high-contrast:none){ 49span.newIcon-a::before { 50display: block; 51position: absolute; 52z-index: -1; 53left: -30%; 54top: -50%; 55content: " "; 56width: 30px; 57height: 100px; 58transform: rotate(30deg); 59background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 60animation: shiny 3s infinite linear; 61} 62} 63 64span.newIcon-s{ 65display: block; 66font-size: 14px; 67height: auto; 68width: 54px; 69padding: 4px 3px 3px; 70margin-left: 20px; 71display: block; 72position: relative; 73z-index: 2; 74overflow: hidden; 75border-radius: 5px; 76background-color: #FEBC01; 77color: #ffffff; 78text-align: center; 79text-decoration: none; 80cursor: default; 81transition: .25s linear; 82-webkit-transition: .25s linear; 83-moz-transition: .25s linear; 84} 85span.newIcon-s::before { 86display: block; 87position: absolute; 88z-index: -1; 89left: -30%; 90top: -50%; 91content: " "; 92width: 30px; 93height: 100px; 94transform: rotate(30deg); 95-webkit-transform: rotate(30deg); 96-moz-transform: rotate(30deg); 97background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 98background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); 99background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); 100animation: shiny 3s infinite linear; 101-webkit-animation: shiny 3s infinite linear; 102-moz-animation: shiny 3s infinite linear; 103} 104@media all and (-ms-high-contrast:none){ 105span.newIcon-s::before { 106display: block; 107position: absolute; 108z-index: -1; 109left: -30%; 110top: -50%; 111content: " "; 112width: 30px; 113height: 100px; 114transform: rotate(30deg); 115background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 116animation: shiny 3s infinite linear; 117} 118} 119@keyframes shiny { 1200% { 121 left: -30%; 122} 12320% { 124 left: 120%; 125} 126100% { 127 left: 120%; 128} 129} 130@-webkit-keyframes shiny { 1310% { 132 left: -30%; 133} 13420% { 135 left: 120%; 136} 137100% { 138 left: 120%; 139} 140} 141@-moz-keyframes shiny { 1420% { 143 left: -30%; 144} 14520% { 146 left: 120%; 147} 148100% { 149 left: 120%; 150} 151} 152 153 154/* --- Newアイコン 20170429--- */ 155</style> 156</head> 157 158<body> 159 <span class="newIcon-a">NEW!</span> 160 <br> 161 <span class="newIcon-s">NEW!</span> 162</body> 163 164</html> 165
chrome,
Firefox,
Safari
では動きました。
DOCKTYPE宣言したり、
ベンダープレフィクスつけたり、
したのですが、上手くいきません。
どうしたら良いでしょうか。
回答2件
0
ベンダープレフィックスの書順が、無し 有り のようになっていますが、CSSは後から出るものを優先するので 有り 無し が良いと思います。（表示に特に問題が出ることは少ないと思いますが）
animation を全部ばらして指定してみるとかどうでしょう。
CSS
1span.newIcon-s::before { 2 animation-name: shiny; 3 animation-duration: 3s; 4 animation-timing-function: linear; 5 animation-delay: 0; 6 animation-iteration-count: infinite; 7}
投稿2017/05/02 05:35
総合スコア69625
0
ベストアンサー
background-image: にIE用のベンダープレフィックスを付けるとうまくいきました。
background-image: -ms-linear-gradient(...);
IE11で確認。
投稿2017/05/02 05:05
総合スコア1151
今回の件は試していませんが、F12 開発者ツールを開いた状態だと(エミュレーションが正しくても)意図しない結果になることがよくありました。IEを開きなおすと正常に戻ります。バグなんでしょうかねぇ？
私の方では開きなおしても消えなかったです。
バグかもしれないです(^^;
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/02 07:00
2017/05/02 07:04
2017/05/02 07:28