Box-Shadow funktioniert auf Chrome aber nicht auf Firefox oder IE

Question

@-webkit-keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 
@-moz-keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 
@-o-keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 
@keyframes neon { 
from { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF1177, 0 0 6px #FF1177, 0 0 9px #FF1177, 0 0 11px #FF1177, 0 0 14px #FF1177; 
} 
to { 
    -webkit-box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 5px #FF9900, 0 0 6px #FF9900, 0 0 9px #FF9900, 0 0 11px #FF9900, 0 0 14px #FF9900 inset; 
} 
} 


.deallinkactive { 
display: inline; 
float: right; 
width: 508px; 
padding: 5px; 
font-size: 14px; 
margin: 10px 10px 8px 8px; 
border: 1.5px solid rgba(173, 38, 38, 0.541176); 
-webkit-border-radius: 3px; 
border-radius: 3px; 
color: rgba(0, 0, 0, 1); 
background: #ecf0f1; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
-webkit-animation: neon2 .2s ease-in-out infinite alternate; 
-moz-animation: neon2 .2s ease-in-out infinite alternate; 
animation: neon2 .2s ease-in-out infinite alternate; 
    } 

Die Box Shadow Animation funktioniert perfekt auf Chrome und Mobiles, aber nicht auf IE und Firefox. Ich habe versucht -webkit-box-shadow, box-shadow, moz-box-shadow und all die Dinge, die ich im Internet gefunden habe. Wenn ich Text-Schatten in Box-Schatten ersetze, funktioniert Text-Schatten. Hilfe!!

Answer 1

Zunächst zeigt Ihre Klasse .deallinkactive auf einen falschen Schlüsselbild, es heißt neon2, ändern Sie das zu neon. dann entfernen Sie -webkit- von allen -webkit-box-shadow. Schließlich wird @keyframes in einem Inline- oder Scoped-Stylesheet in Firefox bug 830056 nicht unterstützt.

Sie haben aber eine andere:

@keyframes neon { 
    0% { 
     -webkit-box-shadow: 0px 0px 12px 0px rgba(255,17,120,1); 
     -moz-box-shadow: 0px 0px 12px 0px rgba(255,17,120,1); 
     box-shadow: 0px 0px 12px 0px rgba(255,17,120,1); 
    } 
    100% { 
     -webkit-box-shadow: 0px 0px 12px 0px rgba(255,153,0,1); 
     -moz-box-shadow: 0px 0px 12px 0px rgba(255,153,0,1); 
     box-shadow: 0px 0px 12px 0px rgba(255,153,0,1); 
    } 
} 

.deallinkactive { 
    display: block; 
    float: right; 
    width: 508px; 
    padding: 5px; 
    font-size: 14px; 
    margin: 10px 10px 8px 8px; 
    border: 1.5px solid rgba(173, 38, 38, 0.541176); 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    color: rgba(0, 0, 0, 1); 
    background: #ecf0f1; 
    transition: all 0.5s ease; 
    animation: neon .2s ease-in-out infinite alternate; 
} 

Fiddle example

Es auf modernen Browsern (Chrome, Firefox, Safari, Internet Explorer 10 +). Ich hoffe es hilft.

Tipp: versuchen box-shadow Erzeugung mit cssmatic.com/box-shadow

Answer 2

Sie haben moz verwenden für firefox

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 

-moz-box-shadow: 10px 10px 5px 0px rgba (0,0,0, 0,75); Box-Schatten: 10px 10px 5px 0px rgba (0,0,0,0,75);

Try-Box Schatten Generator in css3 http://www.cssmatic.com/box-shadow