CSS3アニメーションを学ぶ（アニメーション）

CSS3には、3D効果、アニメーション、複数列など、高度な機能がたくさんあります。今日はCSS3を使ったアニメーションの書き方を記録する記事を書きます。

最初に醜いことを言わなければなりませんが、IE9 以下のバージョンは CSS3 アニメーションをサポートしていません (どうしても実装したい場合は、js の使用を検討できますが、効果はあまり良くありません)。 Chrome と Safafi では、古いバージョンとの下位互換性を確保するために、接頭辞 -webkit- を追加することをお勧めします。

今日はシンプルにアニメーションを作ります。

まず、単純に div を描画し、背景画像を追加します。

リーリー

リーリー

右に示すように、通常の DIV が表示されます:

それでは、動かしましょう

まず、この画像がどのように動くかを記述するメソッドを作成します

リーリー

このanimation_runはこのメソッドの名前です。後で名前を関連要素に関連付ける必要があります。

from はアニメーションの開始状態を表し、to はアニメーションの終了状態を表します。

つまり、この方法は要素を時計回りに 360 度回転させるというもので、非常に簡単です。

from to では日々の開発ニーズを満たせないことが多いため、今でもこの書き方が残っています

リーリー

この説明により、アニメーションのアクションがより豊かでクールになります。各段階での要素のダイナミクスはパーセンテージで表されます。0% は上記の値であり、100% は上記の値です。実はこれ、とても簡単なんですよね~

アニメーションはとても書きやすいです。次に、アニメーションを画像にアタッチします。

リーリー

このような簡単なコードで、定義したメソッドに従って画像を動かすことができます。

アニメーションが動かない場合は、次のいずれかの理由が考えられます:

1. アニメーション名が @keyframes で定義された名前と一致しません。

2. アニメーションの再生時間は定義されていません。デフォルトは 0S で、アニメーションは再生されません。上記のコードは 12S を定義しています;

3. このコードは IE9 以下のブラウザで実行します。IE9 以下は CSS3 アニメーションをサポートしません。

4. アニメーションメソッドが正しく定義されていません。メソッド定義の各段階でスタイルが同じです。以下のように

リーリー

これで、アニメーションが動くようになりました。アニメーションの他のオプションについて話しましょう:

1.animation-iteration-count: アニメーションの再生回数。何回再生したいかを書き留めます。ここで無限に使用しましたが、無限です

2.animation-timing-function: アニメーション速度曲線。この速度曲線は少し複雑で、ベッセル関数が関係しています。ベジェを詳しく調べたくない場合は、既製のリニア、イーズ、イーズイン、イーズアウト、イーズインアウトを使用してください。 Bezier を知っている場合は、cubic-bezier(n,n,n,n) を使用できます。これはより高度で、見せびらかしの世界では強力なツールだと思います。

3.animation-delay: アニメーションを遅延させて再生でき、パラメーターも n S です。 anime-duration とは異なり、animation-duration はアニメーションの再生時間です。

上記の属性はすべて、上記の私のクリのように、アニメーションに短縮できます。

ここでは説明しませんが、逆再生と一時停止の属性もあります。必要に応じて、http://www.w3school.com.cn/css3/css3_animation.asp または

にアクセスしてください。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

まだ質問や提案がある場合は、オリジナルの記事なので、文法が限られており、記事に何か間違っている場合は、最後まで教えてください。