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 {}