CSS3 入門 anime_html/css_WEB-ITnose

前の記事のtransition属性は、時間内でベジェ曲線に従って滑らかに遷移することでアニメーション効果を表現していますが、やはり機能には限界があります。この記事で紹介するアニメーション属性は、従来のアニメーション制作と同じで、フレームのすべてのステップを制御し、より強力なアニメーション効果を生成できます。

他の CSS3 プロパティと同様に、アニメーションには多くのサブプロパティが含まれています。見てみましょう:

• animation-name
• animation-duration
• アニメーション時間関数
• アニメーション遅延
• アニメーション反復回数
• アニメーション方向
• アニメーション再生状態
• animation-fill-mode
• @keyframes

animation-nameCSS がロードされるときの @keyframes ルールの名前を指定します。この名前が適用されます。アニメーション

animation-duration アニメーションの継続時間。デフォルトは 0 (アニメーションなし) です。単位は s 秒または ms ミリ秒に設定できます

animation-time-function アニメーション再生モード。デフォルト値はイーズで、linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n) を設定できます。 、n、n、n)、ステップ。ベジェ曲線とステップについては、transition-timing-function に似た前回の記事のtransitionを参照してください。詳細は説明しません。

animation-delayアニメーションの開始時間を遅延します。デフォルト値は 0 です。これは、遅延がなく、アニメーションがすぐに再生されることを意味します。単位は s 秒または ms ミリ秒です。負の時間を設定することができます。これは、アニメーション アクションがこの時点から開始され、前のアニメーションは表示されないことを意味します。たとえば、-2s を指定すると、アニメーションがすぐに開始されますが、アニメーションの最初の 2 秒はスキップされます。

animation-iteration-countアニメーションがループで再生される回数。デフォルト値は 1 です。これは、アニメーションを 1 回再生した後はループしないことを意味します。数値に加えて、無限ループ再生を示すキーワード「infinite」を設定することもできます。

animation-directionアニメーションの再生方向は、通常、交互、または交互反転に設定できます。デフォルト値は「normal」です。これは、アニメーションが通常どおりに再生されることを意味します。 「alternate」は、アニメーションを順番に順方向と逆方向に再生することを意味します。つまり、アニメーションは通常、奇数番号 (1、3、5...) では再生され、偶数番号 (2、4、6...) では逆方向に再生されます。 alter-reverse はその逆で、奇数回はアニメーションを逆方向に再生し、偶数回は順方向にアニメーションを再生します。ここをクリックして効果を確認してください

.myDiv1 {    width: 75px;    height: 75px;    background-color: red;    position:relative;    animation:aDirection 5s infinite;} @keyframes aDirection {    from {left:0px;}    to {left:200px;}}.alter { animation-direction:alternate; }.alterR { animation-direction:alternate-reverse; } <div class="myDiv1"></div><div class="myDiv1 alter"></div><div class="myDiv1 alterR"></div>

animation-play-stateアニメーションの状態は、実行中または一時停止に設定できます。デフォルト値の running はアニメーションが再生中であることを示し、paused はアニメーションが一時停止されていることを示します。通常、プロパティ object.style.animationPlayState="paused" は、アニメーションを一時停止するために JS 側で使用されます。

animation-fill-modeアニメーションの時間外属性は、なし、前方、後方、およびその両方に設定できます。デフォルト値 none は、アニメーションの再生後に初期状態に戻ることを意味します。 forwards: アニメーションが終了すると、@keyframes の最後のフレームのプロパティが保持されます。 reverse は、アニメーションを開始するときに @keyframes の最初のフレームの属性を適用することを意味し、効果を確認するには、通常、アニメーション遅延の遅延時間を設定する必要があります。 Both は、forward と backforward の両方が適用されることを意味します。

たとえば、遅延時間を 2 秒に設定します。最初は赤でしたが、アニメーションの最初のフレームは緑に変わり、アニメーションの最後のフレームは青に変わります。ここをクリックして効果を確認してください

.myDiv2 {    width: 75px;    height: 75px;    background-color: red;    position:relative;    animation:mymove 5s 1 2s;}@keyframes mymove {    from {left:0px; background-color:green;}    to {left:200px; background-color: blue;}}.forwards { animation-fill-mode:forwards; }.bkforwards { animation-fill-mode:backwards; }.both { animation-fill-mode:both; } <div class="myDiv2"></div><div class="myDiv2 forwards"></div><div class="myDiv2 bkforwards"></div><div class="myDiv2 both"></div>

図 1 では説明していませんが、最も通常の効果は最初は赤で、アニメーションは緑に変わり始め、アニメーションは青で終了し、その後初期状態に戻ります。赤の。図 2 は順方向に設定されています。図 1 との違いは、アニメーションが終了しても初期状態に戻らず、青いままであることです。図 3 は逆方向に設定され、アニメーションが開始される前 (つまり、遅延期間内) に最初のフレームのアクションが適用され、アニメーションが終了すると元の状態に戻ります。図 4 は、前方と後方の両方の効果を持つように設定されています。

@keyframesアニメーション フレームは、アニメーションとトランジションを区別するための鍵です。トランジションでは、時間内で実行されるアクションをより詳細に制御することはできませんが、アニメーションでは、@keyframes を使用して、最初のフレームで何を実行するか、2 フレーム目で何を実行するかを詳細に指定できます。

構文: @keyframes で始まり、アニメーション名が続きます。 % パーセンテージをエンティティ内に作成して、期間を分割できます。キーワード from は 0% に等しく、to は 100% に等しくなります。

@keyframes mymove {    0%   {top:0px; left:0px; background:red;}    25%  {top:0px; left:100px; background:blue;}    50%  {top:100px; left:100px; background:yellow;}    75%  {top:100px; left:0px; background:green;}    100% {top:0px; left:0px; background:red;} }

スペースを節約するために、Firefox の @-moz-keyframes、Chrome と Safari の @-webkit-keyframes、Opera の @-o-keyframes など、さまざまなブラウザーの接頭辞が省略されています。 @keyframes はアニメーション効果を定義するだけですが、アニメーションを有効にするには、animate 属性を使用してアニメーションを特定の DOM 要素にバインドする必要があることに注意してください。

上記のサブ属性は個別に指定することも、背景やその他の属性と同様にアニメーション属性に組み合わせて指定することもできます。アニメーションの例: moveten 1s step(10,end) 無限交互 3 秒を逆方向に移動します。ただし、アニメーション期間とアニメーション遅延はどちらも時間であるため、ブラウザーは順序に従って最初の時間をアニメーション時間とみなし、二回目をアニメーション遅延とみなすため、マージするときは注意してください。

個別に指定するとコードがわかりやすくなるかもしれませんが、各ブラウザにページを適応させる必要があるため、それぞれに-ms、-mozなどの接頭辞を付ける必要があるとコードが多くなり、結合するとコードが若干少なくなります。

アニメーションなどの複数のアニメーション効果を同時に指定することもできます: moveten1 1sease .5s、moveten2 2sease 1s forwards;

まとめ

これで、CSS3 の 3 つの主要なアニメーション関連プロパティ、transform、transition、animation の基本的な内容の紹介が終わりました。一部のサブ属性の原理を理解していないと、コードを変更することは難しく、ましてや自分でコードを記述することは困難です。クールなアニメーション効果が表示されたので、ソース コードを確認して、必要な効果に変更してみてください。次の記事では、一般的で実用的なアニメーション効果をいくつか紹介します。