CSS3 は素晴らしいアニメーション効果を示します css3 アニメーションのプロパティ_html/css_WEB-ITnose

急成長する CSS3 が多くのフロントエンド開発者の注目を集めていることは間違いありません。しかし、CSS3 のアニメーション プロパティについて言えば、これら 3 つのプロパティを考慮する必要があります。 : トランジション?アニメーション。トランスフォーム属性はアニメーション効果を実現できるように見えますが、率直に言えば、実際にはグラフィック変形ツールであり、トランジション属性は操作が非常に簡単です。アニメーション属性を中心に紹介します。これは実際のアニメーション属性です。公式はあまり紹介していませんが、この属性はトランジション属性の拡張であると簡単に説明していますが、その機能は非常に強力です。アニメーションでは複数のキー フレームを定義し、フレーム内の要素のプロパティ値を定義して、複雑なアニメーション効果を実現できます。では、アニメーションではどのようなアニメーションを作ることができるのでしょうか?創造性があり、トスができれば、すべてが可能であると言えます。

この属性については皆さんよくご存知だと思いますので、あまり基本的な知識は紹介しません。あまり詳しくない場合は、インターネットで基本的な知識を検索すると、関連する情報がたくさんあります。

ここで、非常に重要なタグであるキーフレームについて説明します。アニメーションを動かすにはどうすればいいですか？すべてはそれにかかっています。キーフレームの基本原理は Flash のタイムラインやキーフレームと似ているため、リッチなアニメーションを作成できます。簡単な例を見てみましょう:

@keyframes Demons{

from{transform:translate(0,0);}

20%{transform:translate(20,20);}

40%{transform: translation( 40,0);}

60%{transform:translate(60,20);}

80%{transform:translate(80,0);}

to{transform:translate(100,20) ;}

}

上記の例では、「demos」という名前のアニメーションを設定します。この中で、from、20%、40%、60%、80%、および to は、異なる時点での対応する属性効果をそれぞれ表します ( From to は 0% と 100% で表すことができます。0% を 0 に短縮することはできないことに注意してください。複数の時点で対応する属性効果を設定できるため、アニメーション効果が大幅に強化されることがわかります。任意の 2 つの時点で、アニメーションは中間トランジション効果を自動的に計算します。同時に、アニメーションを設定することで期間を制御して、高品質のアニメーションを実現することもできます。アニメーションのアニメーション特性は Flash と比べても遜色なく、数行のコードで簡単に作成できる点が最大の利点です。これは Flash では実現できません。

上のリンクは、サンプル ページを整理するためのものです。サンプルの一部は私が作成したものであり、いくつかはインターネットから収集したものであり、より多くのエキサイティングなアニメーション効果をご覧いただくことが目的です。 、良いアイデアをお持ちの場合は、私たちと共有してこのページに追加してください。CSS3 のおかげでアニメーションですべてが可能であることをより多くの人に知ってもらうために、このサンプル ページも随時更新されます。

注: サンプル ページが十分に完成していないため、当面は添付ファイルのダウンロードができません。