我目前在Firefox中使用边框（从无到50px）的动画时遇到问题。 Chrome非常好，但Firefox不是，我想在Opera中会出现同样的问题。使用Firefox上的边框上的动画时遇到问题（至少）

这里有一个小提琴向您展示问题（试用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: 0 solid;

fiddle

来源

2017-10-12 Louisb

你见过这篇文章吗？ https://stackoverflow.com/questions/21143893/css-animation-in-firefox-not-work – Calaris

我试过了@Calaris它也没有使用前缀。 –

@Bonlo在Firefox中可能会出现动画边框问题。我在firefox中查看w3schools中的示例。他们工作不正常。 –

似乎有一些问题与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; 
}

另外，不要忘了包括与DIF动画不支持前缀以支持旧版浏览器：

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

来源

2017-10-12 12:15:03 Styx

就是这样！ – Louisb

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

解决！

回答

相关问题