CSS動畫不能在Firefox上工作...矢量顯示不能在IE11上工作

Question

這是網站。向下滾動以查看動畫。

http://fics.deremoe.com

如果你認爲它在Chrome，它按預期工作。但是當我在IE11上查看它時，矢量圖像大小是錯誤的。另外，在Firefox中，高度動畫不起作用。

這裏是動畫關鍵幀：如果你不知道，這些是在LESS中。

@header-height   : 10em; 
@header-height-shrink : @header-height/2; 

@-webkit-keyframes animeHeaderBGShow { 
    from{ 
     opacity:0; 
    } 
    to { 
     opacity:100; 
    } 
} 


@keyframes animeHeaderBGShow { 
    from{ 
     opacity:0; 
    } 
    to { 
     opacity:100; 
    } 
} 

@-webkit-keyframes animeHeaderBGHide { 
    from{ 
     opacity:100; 
    } 
    to { 
     opacity:0; 
    } 
} 

@keyframes animeHeaderBGHide { 
    from{ 
     opacity:100; 
    } 
    to { 
     opacity:0; 
    } 
} 

@-webkit-keyframes animeHeaderShrink{ 
    from{ 
     height:@header-height; 
    } 
    to { 
     height:@header-height-shrink; 
    } 
} 

@keyframes animeHeaderShrink{ 
    from{ 
     height:@header-height; 
    } 
    to { 
     height:@header-height-shrink; 
    } 
} 

@-webkit-keyframes animeHeaderExpand{ 
    from{   
     height:@header-height-shrink; 
    } 
    to { 
     height:@header-height; 
    } 
} 

@keyframes animeHeaderExpand{ 
    from{   
     height:@header-height-shrink; 
    } 
    to { 
     height:@header-height; 
    } 
} 

Answer 1

使用瀏覽器特定的CSS是這樣的：

/************** I E ***********************/ 
    @-ms-keyframes animeHeaderBGShow {} 
/************** F I R E F O X ***********************/ 
    @-moz-keyframes animeHeaderBGShow {} 
/************** C H R O M E & SAFARI***********************/ 
    @-webkit-keyframes animeHeaderBGShow {} 
/************** DEFAULT CLASS***********************/ 
    @keyframes animeHeaderBGShow {}