javascript - 应用 CSS 动画时 Chrome 中的文本模糊

Question

我的网站上的动画文本有问题。我正在使用以下 CSS 来制作动画:

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -o-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    -moz-animation-name: fadeInRightBig;
    -o-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
} 

当 .fadeInRightBig 应用于文本元素时，它在 Chrome 中变得模糊，如下图所示。第一个元素没有应用动画。可能由于调整了图像大小，有点难以看清。

据我所知，这个问题只存在于 Chrome 中。在 Firefox 和 IE 中，动画文本很清晰。

我试图在 fiddle (http://jsfiddle.net/DTcHh/2608/) 中重现该问题。然而在这个 fiddle 中它似乎不是问题。

我的网站位于:http://steffanlildholdt.dk/ .

有人知道问题出在哪里吗？

Answer 1

在出现模糊的元素上，应用以下样式:

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;