CODEWITHSUNDEEP
google-chromecsswebkit
eric
eric

Reputation: 454

CSS3 animation not working in Google Chrome

I have an animation that up till a few weeks ago worked in Google Chrome. I changed nothing and all of a sudden it stopped working. I've asked a few people I know who also do websites and no one really could give me a straight answer as to why the animation wont work.

I have a falling leave animation on a website that when you click on the leaf it falls. The image does "fall" according to the browser (visible if you hover over the link tag in developer tools you can see the blue box fall down) but the actual image stays put or only drops a few pixels on the screen. I have no idea why this is happening at all its really confusing.

So how its supposed to go is this: user clicks the leaf, jquery changes the class, and the leaf animation is triggered making the leaf look like its falling. 

@-webkit-keyframes fallingLeaves {
 0% {
     opacity: 1;
     -webkit-transform: translate(0, 10px) rotateZ(0deg);
     -moz-transform: translate(0, 10px) rotateZ(0deg);
     -ms-transform: translate(0, 10px) rotateZ(0deg);
     -o-transform: translate(0, 10px) rotateZ(0deg);
     transform: translate(0, 10px) rotateZ(0deg);
     z-index: 100;
 }
 75% {
      opacity: 1;
      -webkit-transform: translate(100px, 600px) rotateZ(270deg);
      -moz-transform: translate(100px, 600px) rotateZ(270deg);
      -ms-transform: translate(100px, 600px) rotateZ(270deg);
      -o-transform: translate(100px, 600px) rotateZ(270deg);
      transform: translate(100px, 600px) rotateZ(270deg);
      z-index: 100;
 }
 100% {
      opacity: 0;
      -webkit-transform: translate(150px, 800px) rotateZ(360deg);
      -moz-transform: translate(150px, 800px) rotateZ(360deg);
      -ms-transform: translate(150px, 800px) rotateZ(360deg);
      -o-transform: translate(150px, 800px) rotateZ(360deg);
      transform: translate(150px, 800px) rotateZ(360deg);
      z-index: 100;
 }

}

this is one of the animations of one of the leaves (there are different animations to make the leaves fall differently).

If anyone could help me it would be awesome. I've tried a lot and asked quite a few people and got nothing. Thanks

The website this is located on so you can check it out is www.shearmadnesshoboken.com

I should note that the animation does work on Google Chrome on Linux. I also think it works in safari all but one of the leaves fall correctly there (why only one of them doesn't fall is beyond me but yeah).

Upvotes: 1

Views: 3497

Answers (1)

methodofaction
methodofaction

Reputation: 72385

This looks like a browser bug to me. Check if your Linux version is the same as your (Mac?) version. A workaround I found was removing rotateZ(0deg) in your first keyframe (which you don't really don't need to specify).

 0% {
     opacity: 1;
     -webkit-transform: translate(0, 10px);
     -moz-transform: translate(0, 10px);
     -ms-transform: translate(0, 10px);
     -o-transform: translate(0, 10px);
     transform: translate(0, 10px);
     z-index: 100;
 }

Upvotes: 1

Related Questions