在火狐浏览器的边框上使用动画时遇到麻烦(至少)

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;

小提琴

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