10分で始めるCSS3アニメーション

導入

アニメーションを使用すると、JavaScript や jQuery に依存せずに、純粋な CSS を使用して Web ページにさまざまなアニメーション効果を簡単に実装できます。

互換性

アニメーションはほとんどの主要なブラウザでサポートされています。まだ IE9 と互換性がある学生は注意して使用する必要があります。

CSS 座標系

アニメーションを理解する前に、まず CSS 座標系を理解する必要があります。これは、多くのアニメーション効果が要素の座標と密接に関連しているためです。 CSS3 では、Web ページは 2 次元平面ではなく、3 次元空間になります。水平方向、垂直方向、垂直画面方向は、それぞれ 3 次元座標系の x 軸、y 軸、z 軸に対応します (下図を参照)。矢印の方向は正で、その逆は負です (y 軸方向は従来の直交座標系とは逆であることに注意してください)。

アニメーション

1. 変換

Transform は中国語で「変換」と翻訳されますが、私は「変形」と呼ぶことを好みます (有名な Transformer は transformers と呼ばれます)。 transform 関数を使用すると、通常のドキュメント フローに影響を与えることなく、HTML 要素に平行移動、拡大縮小、回転、歪みなどのさまざまな変形を生成させることができます。

（１）翻訳する

Translate は一般的に「翻訳」と翻訳されますが、translate は 3D 座標系で HTML 要素の位置を変更するために使用されるため、CSS では一般的に「翻訳」として使用されます。 Translate は、座標系内の任意の方向への移動をサポートします (x、y、z 方向のベクトルの任意の組み合わせを通じて)。単位は長さ単位とパーセンテージです (パーセンテージは移動する要素のサイズに相対的、x 軸は幅に相対的、y 軸は高さに相対的、z 方向では要素に「厚さ」がないため、z 方向はパーセンテージで表現できません)。例:

変換: translateX(100px) translateY(50%) translateZ(-100px);
// または省略形 transform: translate3d(100px, 50%, 2em);

知らせ：

translateは xy 平面での 2D 変換、 translate3d xyz 空間での 3D 変換です。

translate translate: 50% 105px 5rem;のように単独で記述することもできますが、この機能はまだ実験段階であり、多くのブラウザがサポートしていないため、現段階ではtransformと組み合わせて使用​​されています。詳細については、MDN 翻訳を参照してください。

（２）規模

スケールは「ズーム」を意味し、その名前が示すように、要素のサイズを変更するために使用されます。例えば：

変換: スケールX(2) スケールY(0.5) スケールZ(1);
// または、transform を省略します: scale3d(2, 0.5, 1);

scaleメソッドは、任意の数値 (正または負の整数、小数、0) をパラメーターとして受け入れます。これがスケーリング係数です。係数 > 1 の場合、効果は拡大です。0 < 係数 < 1 の場合、効果は縮小です。係数 = 0 の場合、要素のサイズは無限に小さくなり、見えなくなります。係数 < 0 の場合、効果は > 0 の値の鏡像です (特定の効果を自分で試すことができます)。

translateと同様に、 scaleにも 2 次元のscale()と 3 次元のscale3d()がありますが、これらも別々に記述できるため、ここでは説明しません。

（３）回転する

Rotate は「回転」を意味し、x、y、z 軸を中心とした回転要素をサポートします。回転の正方向は、座標軸の正方向を向いて反時計回りです。上記の座標系図を参照してください。 rotateメソッドは、角度をパラメータとして受け入れます。角度 > 0 は正の方向に回転し、角度 < 0 は負の方向に回転します。例:

// デフォルトの Z 軸周りの回転 transform: rotate(90deg);
変換: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

translate や scale とは異なり、rotate はtransform: rotate3d(30deg, 60deg, 90deg) rotate3dように省略できません。rotate3d の使用方法は次のとおりです。最初の 3 つのパラメータは数値で、x、y、z 方向のベクトルを表し、これらを加算してベクトル v を取得します。4 番目のパラメータは角度で、ベクトル v を中心とした反時計回りの回転角度を表します。構文は次のとおりです。

変換: rotate3d(1, 2, 3, 90deg);

translateやscaleと同様に、 rotateも個別の CSS プロパティとして使用できますが、まだ実験段階です。

スペースの都合上、最もよく使用される 3 つの変換関数のみをリストします。残りの変換関数については、MDN の変換関数を参照してください。

（４）組み合わせ

次のようなさまざまな変換方法を組み合わせることができます。

変換: translateY(200px) rotateZ(90deg) scale(3);

組み合わせたメソッドの実行順序は右から左です。つまり、最初にスケールが実行され、次に回転、最後に平行移動が実行され、効果が累積されます。メソッドを記述する順序は、最終的な効果に大きな影響を与えます。次の例を見てください。Y 軸に沿った移動とズームでは、順序によって結果が大きく異なります。

最初に移動してから拡大縮小すると、移動距離も比例して拡大縮小されますが、最初に拡大縮小してから移動した場合は、これは起こりません。そのため、transform を使用する場合は、 translate -> rotate -> scaleの順序で記述する必要があります。 translate の効果が増幅されないように scale を先に実行し、 translate 距離による回転を防ぐために rotate を translate の前に実行します。メソッド間の干渉がわかりにくく、記述順序が覚えにくいため、これが現時点での transform の不便さであると思います。将来的には、独立した CSS 変換プロパティを使用することでこの問題が解決されることが期待されます。独立した変換プロパティは記述順序に依存せず、メソッドが互いに干渉しないためです。

遷移

Transition は「移行」と翻訳され、プロセスを強調します。 CSS では、一定期間内に要素が 1 つの状態 (CSS 属性に対応) から別の状態に遷移する動的なプロセスを指します。どのように移行するか、どのくらいの時間を費やすかは私たちが決めることができます。

たとえば、マウスをクラウドの上に置いたときにクラウドを大きくするには、次のように記述します。

。雲{
    幅: 240ピクセル;
    遷移: 1秒;
}
.cloud:hover{
    幅: 320ピクセル;
}

効果：

トランジションはトランスフォームと組み合わせて使用​​できます。たとえば、クラウドを大きくすると同時に回転させることができます。

.cloud:hover{
    幅: 320ピクセル;
    変換: 回転(360度);
}

効果：

さまざまな効果に異なる遷移時間を設定できます。

。雲{
    幅: 240ピクセル;
    遷移: 幅 1 秒、変換 0.5 秒。
}

効果の遅延時間を設定することもできます。たとえば、回転する前に幅が広がるまで待機します。

。雲{
    幅: 240ピクセル;
    遷移: 幅 1 秒、変換 0.5 秒 1 秒;
}

効果：

加速効果を制御するために、各効果に異なるタイミング関数を設定することもできます。

たとえば、回転速度を徐々に上げることができます。

。雲{
    幅: 240ピクセル;
    遷移: transform 2s イーズイン;
}

.cloud:hover{
    変換: 回転(1080度);
}

効果：

タイミング関数については後ほど詳しく説明します。また、MDNのtransition-timing-functionsも参照してください。

キーフレーム

（１）基本的な使い方

キーフレームは中国語で「キーフレーム」と翻訳されます。アニメーションにおいて非常に強力な機能です。簡単に言えば、アニメーションのキーポイントとキー状態を定義することでアニメーションを作成できます。キーフレームは、トランジションよりもアニメーションのプロセスと詳細をより強力に制御できます。

まずは例を見てみましょう（一部のコードは省略）

html:

<div class="sky"></div>
<div class="草"></div>
<div class="道路">
  <div class="lines"></div>
  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="マリオアニメーション">
</div>

CS: ...

.マリオ{
  位置: 絶対;
  左: 0px;
  幅: 100ピクセル;
}

.アニメーション{
  アニメーション名: ドライブ;
  アニメーション期間: 1秒;
  アニメーションタイミング関数: linear;
}

@keyframes ドライブ {
  { 変換: translateX(0) } から
  to{ transform: translateX(700px) }
}

効果：

driveはキーフレームの名前で、 from, toキーフレーム再生プロセスの開始時間と終了時間です。時間ポイントは50%などのパーセンテージで表すこともできます。 from， toそれぞれ0%, 100%に相当します。各時間ポイントは CSS 状態に対応し、キーフレームを表します。キーフレームを定義した後の使用方法は次のようになります。

アニメーションには次のような短縮形もあります。

アニメーション: スライドイン 3 秒、イーズイン 1 秒、無限反転、両方実行中。

ただし、このメソッドには、書き込み順序に関する特定の要件があります (delay は、duration の後に書き込む必要があり、他のパラメータには順序の要件はなく、CSS は渡されたキーワードを通じてそれらを認識します)。

（２）アニメーションの遅延

animation-delayを使用すると、アニメーションの実行を遅らせることができます。

アニメーション遅延: 2秒;

（３）アニメーションフィルモード前進

上記の例では、マリオが右に移動してから開始点に戻ることがわかります。移動が完了した後もマリオを右側に留まらせたい場合はどうすればよいでしょうか。とても簡単です。アニメーションの塗りつぶしモードを設定するだけです。

アニメーション塗りつぶしモード: 前進

forwards 、アニメーションが完了した後、要素が最後のフレームの状態のままになることを意味します。

後ろ向き

これに対してbackwardsは、アニメーションが完了した後、要素が最初のフレームの状態に戻らないことを意味しbackwards 。代わりに、 animation-delayが設定されている場合、アニメーションが開始される前の待機プロセス中に、最初のフレームの状態が要素にすぐに適用されることを意味します。効果を確認するために、上記の例を少し変更してみましょう。

.アニメーション{
  アニメーション名: ドライブ;
  アニメーション期間: 1秒;
  アニメーション塗りつぶしモード: 逆順;
  アニメーション遅延: 1秒;
  アニメーションタイミング関数: linear;
}

@keyframes ドライブ {
  { 変換: translateX(350px) } から
  to{ transform: translateX(700px) scale(2) }
}

効果：

ご覧のとおり、アニメーションが始まる直前に男性が 350 ピクセルに移動し、1 秒後にアニメーションが始まります。

両方

明らかに、どちらも順方向ルールと逆方向ルールの両方を同時に適用します。つまり、遅延中は最初のフレームの状態が最初に適用され、最後のフレームの状態が最後に保持されます。

（３）アニメーションリピート

アニメーションがループする回数はanimation-iteration-countで設定できます。次に例を示します。

アニメーションの反復回数: 3;

// 無限ループ animation-iteration-count: infinite;

このような：

（４）アニメーションディレクション

普通

デフォルトの方向でもある通常の方向は、最初は from で、次に to です。

逆行する

通常の方向とは反対、つまり、最初に へ、次に から。例えば：

.アニメーション{
  ...
  
  アニメーション方向: 逆;
}

@keyframes ドライブ {
  { 変換: translateX(-100px) rotateY(180deg) } から
  to{ 変換: translateX(862px) rotateY(180deg)}
}

効果：

代替

Alternate は「交互に」という意味で、つまり、通常と逆が交互に、最初は通常、次に逆になります。

逆交互

逆方向に交互に行います。最初は逆方向に、次に通常方向に行います。

（4）アニメーションタイミング機能

トランジションと同様に、キーフレームでもタイミング機能を設定できます。よく使用されるタイミング機能は次のようにまとめられます。

• イージー: 最初はゆっくり始まり、その後加速し、その後減速するデフォルトの方法
• イーズイン：最初の速度は最も遅く、その後加速します
• イーズアウト: 初期速度が最も速く、その後は徐々に遅くなります
• イーズインアウト: 初期速度は遅く、その後加速して減速します。イージーとの違いは、加速と減速のプロセスが対称的であることです。
• リニア：一定速度の動き

直感的な表現は次のようになります (codepen):

上記の既成の方法に加えて、ベジェ曲線を通じて速度曲線をカスタマイズすることもできます。 http://cubic-bezier.com で、独自のベジェ曲線を視覚的に作成できます。たとえば、最初は非常に遅く始まり、その後突然非常に速くなる曲線を作成します。

css:

アニメーションタイミング関数: cubic-bezier(1,.03,1,-0.03);

効果：

すごいですね！

（５）チェーンアニメーション

複数のアニメーションを連続して使用できます。たとえば、運転中に小さな男がジャンプするようにしたい場合は、次のように記述します。

css:

.マリオ{
  ...
  
  アニメーション: ドライブ 3 秒、両方無限線形、ジャンプ 0.5 秒、1.2 秒、イーズイン アウト無限。
}

@keyframes ジャンプ {
  0% { 上: -40px; }
  50% { 上: -120px; }
  100% { 上: -40px; }
}

効果：

練習する

この記事の目的は、CSS3 アニメーションの基礎を普及させることです。アニメーションの知識を完全に網羅しているわけではありません。知識に触れなかったり説明しなかったりすることをお許しください。 上記の知識を習得すれば、アニメーションを使用して豊富なアニメーション効果を作成できます。以下は、codepen の小さな例です。

フルマリオデモ

アニメーションポップアップ

商品をショッピングカートに飛ばす

カードをめくる

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。