動畫不能正常工作CSS3

我一直有CSS3的問題，在動漫作品中的Chrome，但在Firefox中不起作用。動畫不能正常工作CSS3

的CSS代碼：

.mwhaha { 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:98; 
    background-color:rgba(0, 0, 0, .6); 
    animation: fade-in 2s; 
    -moz-animation: fade-in 2s; 
    -webkit-animation: fade-in 2s; 
}

動畫代碼：

@keyframes fade-in 
{ 
    from { 
     opacity:0; 
     display:block; 
    } 
    from { 
     opacity:1; 
     display:block; 
    } 
} 
@-moz-keyframes fade-in 
{ 
    from { 
     opacity:0; 
     display:block; 
    } 
    to { 
     opacity:1; 
     display:block; 
    } 
} 
@-webkit-keyframes fade-in 
{ 
    from { 
     opacity:0; 
     display:block; 
    } 
    to { 
     opacity:1; 
     display:block; 
    } 
}

就像我說的，代碼工作在Chrome，但在Firefox不起作用。我一直在嘗試其他幾種方法來使它像工作：

@-moz-keyframes fade-in 
{ 
    from { 
     background-color:rgba(0, 0, 0, .0); 
     display:block; 
    } 
    to { 
     background-color:rgba(0, 0, 0, .6); 
     display:block; 
    } 
}

但還是沒有結果。

來源

2012-02-11 Kristjan

雙用在關鍵幀？ – ChristopheCVB 2012-02-11 16:05:52

哎呀，將修復它，並嘗試它是否工作。我的壞:) /編輯：還沒工作 – Kristjan 2012-02-11 16:16:18

我複製你的代碼到網頁和動畫效果的罰款。你的問題必須在其他地方。 – 2012-02-13 12:27:49

我已經把這個在小提琴和糾正小錯誤，其IMO沒有造成問題。小提琴在Firefox 35.0/Mac OSX上的優勝美地正常工作。

http://jsfiddle.net/o3qqeL8k/

哪個FF您使用的版本是什麼操作系統？

@keyframes fade-in { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 
@-moz-keyframes fade-in { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 
@-webkit-keyframes fade-in { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 
.mwhaha { 
 
    width:100%; 
 
    height:100%; 
 
    position:fixed; 
 
    z-index:98; 
 
    background-color:rgba(0, 0, 0, .6); 
 
    animation: fade-in 2s; 
 
    -moz-animation: fade-in 2s; 
 
    -webkit-animation: fade-in 2s; 
 
}

<div class="mwhaha"></div>

來源

2015-01-19 17:08:43 connexo

動畫不能正常工作CSS3

回答

相關問題