css - 在 firefox 上使用边框动画时出现问题(至少)

Question

我目前在 Firefox 中使用边框动画时遇到问题，从无到 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;
}

我想问题出在 border: 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;
...