0

I have this code here for animation, works great in Chrome, however

in Safari my webfont from google weight is normal across the page and when this animation is used all the webfonts go to "light" weight??

Firefox this animation doesn't even work?

Thanks!

@-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); }
}
Matt
  • 5,005
  • 10
  • 32
  • 39
  • What is the custom webfont, and its definition code? –  Apr 07 '13 at 19:09
  • The webfont is open sans, and what do you mean by definition code? – Matt Apr 07 '13 at 20:30
  • The code how you defined your custom font and maybe the HTML that it's about. A fiddle would be even nicer ;) –  Apr 07 '13 at 20:31
  • sorry, what I'd put in fiddle is nearly the same, anyways - I just did a little more testing and if I set the font-weight to bold, or 600, it will be normal weight, and if I do 400, it will become lighter, it seems to just go one weight down when the animation runs.:/ any idea why ff may not work either> – Matt Apr 07 '13 at 20:58
  • Can you link to a page showing the animation not running in Firefox, please? – Boris Zbarsky Apr 09 '13 at 07:30

0 Answers0