firefox（少なくとも）のボーダーでアニメーションを使用する際に問題が発生しました

Question

現在、ボーダーでアニメーションを使用していません（Firefoxでは、なしから50pxまで）。 Chromeは大丈夫ですが、Firefoxはそうではありません。同じ問題がOperaにあると思います。

ここであなたの問題を表示するために少しフィドル（その後、FF、Chromeを試してください）です。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; 
} 

は、私は問題は国境から来ると仮定：なし。

は解決済み：値が、私は...これを達成する方法を

編集を知りません！

事はFirefoxが少なくともある国境の初期定義、必要があるということである：Firefoxで国境をアニメーションといくつかの問題があるようだが、それは解決できる

border: 0 solid; 

fiddle

Answer 1

を

@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; 
} 

また、DIFとアニメーションを含めることを忘れないでください。このような古いブラウザをサポートする接頭語：

@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; 
...