Question

这是网站。向下滚动以查看动画。

http://fics.deremoe.com

如果您在Chrome上查看它，它会按预期运行。但是当我在IE11上查看它时，矢量图像大小是错误的。此外，在Firefox中，高度动画不起作用。

这里是动画关键帧：如果您不知道，这些关键帧很少。

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

CSS动画不能在firefox上运行...矢量显示不能在IE11上运行

1 个答案: