Problem mit der Animation auf Grenze auf Firefox (mindestens)

Question

Ich habe derzeit Probleme mit der Verwendung von Animation auf einer Grenze, von keiner bis 50px, in Firefox. Chrome ist sehr in Ordnung, aber Firefox ist nicht, und ich denke, das gleiche Problem wird in Opera sein.

Hier ist eine kleine Geige, das Problem zu zeigen (versuchen Chrome, dann FF): https://jsfiddle.net/Bonlo/kL5g0qdx/

@keyframes fadeBorder { 
    from { border: 0 solid rgba(0,0,0,0);} 
    to { border: 30px solid black;} 
} 
.main-wrapper { 
    width: 400px; 
    height:400px; 
    background-color: white; 
    animation-name: fadeBorder; 
    animation-duration: 1.5s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

Ich nehme an, dass das Problem von der Grenze kommen: none; Wert, aber ich weiß nicht, wie das ...

bearbeiten zu erreichen:

Gelöst!

Die Sache ist, dass Firefox eine anfängliche Definition der Grenze muß, die zumindest:

border: 0 solid; 

fiddle

Answer 1

Es scheint, gibt es einige Probleme mit Grenzen in Firefox Animieren, aber es könnte gelöst werden dies wie:

@keyframes fadeBorder { 
    from { border-width: 0; } 
    to { border-width: 30px; } 
} 
.main-wrapper { 
    width: 400px; 
    height:400px; 
    background-color: white; 
    border: 0 solid black; /* <-- added line */ 
    animation-name: fadeBorder; 
    animation-duration: 1.5s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

auch vergessen Sie nicht Animation mit dif enthalten Präfixe zur Unterstützung älterer Browser:

@keyframes fadeBorder { ... } 
@-webkit-keyframes fadeBorder { ... } 
@-moz-keyframes fadeBorder { ... } 
@-o-keyframes fadeBorder { ... } 
... 
animation-name: fadeBorder; 
-webkit-animation-name: fadeBorder; 
-moz-animation-name: fadeBorder; 
-o-webkit-animation-name: fadeBorder; 
...