jquery - この動くロケットは CSS3 (アニメーション) を使用していますか?

Question

このロケットは CSS3 (アニメーション) を使っていると思いますか? それともjQuery？Web デザイナーが書いた CSS を理解しようとしましたが、ロケットを動かすスタイルが見つかりませんでした。

そんなアニメーションをどうやって作るの？アイデアやチュートリアルがあれば共有してください。こういうアニメーションを学びたいです。ありがとうございました！:)

Answer 1

絶対にありません：

理由を教えてください。次回は自分で理解できるようにします。

Google Chrome で、ロケットの上で「右クリック」->「要素の検査」アクションを使用します。Chrome ではロケットが自動的に選択され、次のようなインラインが表示されます。

<img class="floating-rocket" src="images/rocket.png" alt="Launching" style="margin-top: -90.86px; margin-left: -510.43px; ">

この部分:style="margin-top: -90.86px; margin-left: -510.43px; "動的に変化し、ロケットを前後に動かします。この動作は CSS では実行できません。影響を受けるタグがimgタグであり、CSS アニメーション プロパティがないことを確認することで、これを再確認することもできます。

インライン スタイルの変更は、Javascript の典型です。実際、ページに添付された Javascript ファイルを見ると、次のようになります。

http://demo.drythemes.com/thebigbang/js/custom/customUI.js

これには、ロケットを動かす実際の JavaScript が含まれています。

お役に立てれば！

Answer 2

http://demo.drythemes.com/thebigbang/js/custom/customUI.js

ロケットのアニメーションがあります:

$('.floating-rocket').everyTime(10, function () {
            $(".floating-rocket").animate({
                marginTop: "+=10",
                marginLeft: "+=5"
            }, 1000, 'linear').animate({
                marginTop: "-=10",
                marginLeft: "-=5"
            }, 1000, 'linear');
    });

Answer 3

Javascript アニメーションを使用します。

Chrome Dev Tools を使用して把握してください。Chrome でロケットを右クリックし、[Inspect element] をクリックします。

このウェブサイトのように、これには CSS アニメーションを使用することをお勧めします。

これを行う方法の例を次に示します。

@-webkit-keyframes rocket {
   from {
    margin-left: -510px;
    margin-top: -90px;
   }
   to {
    margin-left: -500px;
    margin-top: -100px
   }
}
.rocket {
 -webkit-animation: rocket 1s alternate infinite linear;
}

もちろん、プレフィックス :DI を付けることを忘れないでください。このソリューションの方が CSS > Javascript の方が優れていると思います。拡大縮小や回転が必要な場合は、簡単に追加できます。