我目前在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上的邊框上的動畫時遇到問題（至少）

解決！

回答

相關問題