Question

我有一个悬停的css动画来“淡出”按钮上的文字（并滚动图标），这适用于除IE Edge之外的所有主要浏览器。在IE Edge中，文本闪烁。我已经尝试了不同的东西来使它工作，但无论我尝试过什么，它仍然在IE Edge上闪烁。我的代码是：

#navbar ul li.item-122 a:hover{-webkit-animation:fadeOutText 0.5s;-moz-animation:fadeOutText 0.5s ease-in-out;-ms-animation:fadeOutText 0.5s ease-in-out;-o-animation:fadeOutText 0.5s ease-in-out;animation:fadeOutText 0.5s ease-in-out;-webkit-backface-visibility:hidden} /* the text to fade */

#navbar ul li.item-122 a:hover::before,#navbar ul li.item-122 span:hover::before{-webkit-animation:moveToRight 0.5s ease-in-out;-moz-animation:moveToRight 0.5s;-ms-animation:moveToRight 0.5s ease-in-out;-o-animation:moveToRight 0.5s ease-in-out;animation:moveToRight 0.5s ease-in-out} /* the icon moving - this works fine, it's the text which flickers */

@-webkit-keyframes fadeOutText{
    0%{color:#005baa}
    80%{color:#005baa}
    100%{color:#fff}
}
@-moz-keyframes fadeOutText{
    0%{color:#005baa}
    80%{color:#005baa}
    100%{color:#fff}
}
@-o-keyframes fadeOutText{
    0%{color:#005baa}
    80%{color:#005baa}
    100%{color:#fff}
}
@keyframes fadeOutText{
    0%{color:#005baa}
    80%{color:#005baa}
    100%{color:#fff}
}

如果您需要移动CSS的图标，请告诉我，但我认为它对闪烁的文本没有任何影响？

css动画在ie边缘闪烁

0 个答案: