麻烦在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;
}

我认为问题来自边界：没有;价值，但我不知道如何实现这一目标......

编辑：

解决！

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

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

此外，不要忘记包含具有不同前缀的动画以支持旧浏览器：

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