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

Posted 2023-03-06

【中文标题】在Firefox的边框上使用动画时遇到问题（至少）

【英文标题】：Trouble using animation on border on firefox (at least)

【发布时间】：2018-03-24 08:08:15

【问题描述】：

我目前无法在 Firefox 中使用从无到 50 像素的边框动画。 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

【问题讨论】：

你看过这篇文章吗？ ***.com/questions/21143893/…

我试过 @Calaris 它也不能使用前缀。

@Bonlo Firefox 中的动画边框可能存在问题。我在 Firefox 中查看了 w3schools 中的示例。它们工作不正常。

@Calaris 不，我没有，但现在完成了；我试过了，终于找到了诀窍！ FF 似乎需要一个初始边界定义，并且最小值似乎是 0 实心。在 Firefox 56.0.1 上工作。如果有人能说它也在 Opéra 上工作，那就太棒了。

【参考方案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;
...

【讨论】：

是的，就是这样！