Blurry text in Chrome when using CSS animations

I have a problem with animated text on my site. I am using the following CSS to animate:

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

      

        
        
        
      

    

When .fadeInRightBig is applied to a text element, it becomes blurry in Chrome, as shown in the following figure. The first element does not use animation. It might be a little tricky to see due to the resizing of the image.

As far as I know, this problem only exists in Chrome. In Firefox and IE, animated text is crisp.

I tried to recreate the problem in the Fiddle ( http://jsfiddle.net/DTcHh/2608/ ). However, this is not a problem in this Fiddle.

My site is here: http://steffanlildholdt.dk/ .

Does anyone have any idea what the problem might be?