Search code examples
cssanimationwebkittransformscale

CSS Animation Scale works in Firefox, not in Chrome

RESOLVED: CSS Animation/Scale issue in Chrome/Webkit

I asked this question previously, but I'm not sure if it was clear. I've done a ton of troubleshooting since to no avail. So I'm back w/ a play-by-play hoping for some help.

  1. Using JS, on doc ready, I remove the class that hides the image and add logoAnim which sets the object in motion.

  2. The object should drop in with a simultaneous scaleY(2) effect- an oozing/drip effect.

You can see the correct effect in the JSFiddle link via Firefox/Moz, however it doesn't work in Chrome/Webkit. Looking at the Firebug code in FF, the '-moz-animation:2s ease 2s normal none 1 ooze' appears in the CSS of the '.logoAnim'- it doesn't appear in the webkit version in Chrome.

Am I missing something? Is structure/order of the css important in webkit?

http://jsfiddle.net/AfDwu/5/

Solution

  • This problem has been resolved by DuoPixel: CSS Animation/Scale issue in Chrome/Webkit

    You are not specifying the properties of the -webkit-animation, only the name.

    Replace: -webkit-animation-name: ooze

    With: -webkit-animation: ooze 2s 2s ease-in-out;

    And it will work.