1

数週間前までGoogleChromeで動作していたアニメーションがあります。何も変更しなかったのですが、突然動作しなくなりました。私が知っている何人かの人々にウェブサイトもやっていると聞いたが、アニメーションがうまくいかない理由について、誰も私に正直な答えを与えることができなかった。

ウェブサイトに落ち葉のアニメーションがあり、葉をクリックすると落ちます。画像はブラウザに応じて「落下」しますが（開発者ツールでリンクタグにカーソルを合わせると、青いボックスが落下するのがわかります）、実際の画像は配置されたままになるか、画面に数ピクセルしか表示されません。なぜこれが本当に混乱しているのか私にはわかりません。

つまり、ユーザーが葉をクリックすると、jqueryがクラスを変更し、葉のアニメーションがトリガーされて、葉が落ちているように見えます。

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

}

これは、1つの葉のアニメーションの1つです（葉の落下を変えるためのさまざまなアニメーションがあります）。

誰かが私を助けることができればそれは素晴らしいでしょう。私はたくさん試しましたが、かなりの数の人に聞いてみましたが、何も得られませんでした。ありがとう

あなたがそれをチェックすることができるようにこれが置かれているウェブサイトはwww.shearmadnesshoboken.comです

アニメーションはLinux上のGoogleChromeで機能することに注意してください。また、サファリでも機能すると思いますが、1枚の葉を除いてすべて正しく落ちます（なぜ1枚だけが落ちないのかは私を超えていますがそうです）。

4

1 に答える 1

1

これは私にはブラウザのバグのように見えます。Linuxのバージョンが（Mac？）バージョンと同じかどうかを確認してください。私が見つけた回避策rotateZ(0deg)は、最初のキーフレームを削除することでした（実際には指定する必要はありません）。

 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;
 }
于 2012-08-25T07:47:43.713 に答える