使用Firefox上的边框上的动画时遇到问题（至少）

Question

我目前在Firefox中使用边框（从无到50px）的动画时遇到问题。 Chrome非常好，但Firefox不是，我想在Opera中会出现同样的问题。

这里有一个小提琴向您展示问题（试用Chrome，然后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; 
} 

我想，从边界来的问题：无;值，但我不知道如何实现这一目标？

编辑：

解决！

的事情是，火狐需要边界的初始定义，这至少是：

border: 0 solid; 

fiddle

Answer 1

似乎有一些问题与Firefox的动画边界，但它可以解决像这样：

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