在 firefox 上使用边框动画时出现问题（至少）

Question

我目前在 Firefox 的 none 到 50px 边框上使用动画时遇到问题。 Chrome 很好，但 Firefox 不行，我想 Opera 也会有同样的问题。

这里有一点 fiddle 来向您展示问题（尝试 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;
}

我想问题出在边界上：none；值，但我不知道如何实现...

编辑：

已解决！

问题是 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;
...

在 firefox 上使用边框动画时出现问题（至少）

Trouble using animation on border on firefox (at least)

css

firefox

animation

border

已解决！