CSS3动画打破了webfont？并且不会在FF工作

Question

我在这里有动画的代码，在Chrome中效果很好，但是

在Safari中我的webfont来自google weight在整个页面中是正常的，当使用这个动画时，所有的webfonts都会变成“轻”重量？

Firefox这个动画甚至不起作用？

谢谢！

@-webkit-keyframes swing {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes swing {
    0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
    10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
    40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
    50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
    100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

@-o-keyframes swing {
    0% { -o-transform: translate(2px, 1px) rotate(0deg); }
    10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -o-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -o-transform: translate(0px, 2px) rotate(0deg); }
    40% { -o-transform: translate(1px, -1px) rotate(1deg); }
    50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -o-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -o-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -o-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -o-transform: translate(2px, 2px) rotate(0deg); }
    100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes swing {
0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}