应用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中，动画文字很清晰。

我试图在小提琴（http://jsfiddle.net/DTcHh/2608/）中重新创建问题。然而在这个小提琴中它似乎不是一个问题。

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

任何人都知道问题是什么？

Answer 1

在显示模糊的元素上，应用以下样式：

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