初心者向けのシンプルなCSSアニメーションチュートリアル

CSSアニメーションの鍵は、@KeyFramesとアニメーション属性の使用を習得することです。 1。@KeyFramesは、アニメーションキーフレームを定義し、アニメーションのさまざまな段階の状態をfrom/toまたはpercerationに設定するために使用されます。 2。アニメーション属性は、名前、持続時間、緩和機能、遅延、再生数などの設定を含む要素にアニメーションを適用します。 3.コードは、短縮属性によって簡素化でき、複数の要素のスティュガード再生の効果は、アニメーション遅延を使用して達成されます。 4.ブラウザの互換性、パフォーマンスの最適化、メソッドのトリガー、アニメーションをシンプルに保つことに注意してください。これらのコアポイントを習得することで、滑らかで美しいCSSアニメーションを簡単に作成できます。

CSSアニメーションは、特に初心者にとってはそれほど難しくありません。基本構造といくつかの重要な属性をマスターする限り、スムーズで美しい効果を作成できます。この記事は、最も単純な例から始まり、CSSを使用してアニメーションを作成する方法を理解するのに役立ちます。

1.最初に@keyframesとは何かを見つけます

アニメーションを実行したい場合は、まずキーフレームを定義することを学ぶ必要があります。 @keyframesは、さまざまな段階でどのアニメーションがどのように見えるかをブラウザに伝えるために使用されます。

たとえば、左から右に移動する小さな正方形のアニメーションを作りたい場合は、次のように書くことができます。

 @keyframes move {
  から {
    変換：transtex（0）;
  }
  に {
    変換：transtex（200px）;
  }
}

また、次のようなより細かいリズムを制御するためにパーセンテージを使用することもできます。

 @KeyFrames Fadein {
  0％{不透明：0; }
  50％{不透明：0.5; }
  100％{不透明：1; }
}

覚えておいてください： @keyframes 「アニメーションが見えるもの」を定義するだけですが、まだどの要素にも適用されていません。

2.要素にアニメーションを追加します

アニメーションを定義した後、次のステップは、特定の要素で使用することです。これには、 animation属性またはそのサブプロパティの使用が必要です。

たとえば、divを移動したい場合は、次のように書くことができます。

 。箱 {
  アニメーション名：移動;
  アニメーションデュレーション：2秒;
  アニメーション - タイミング機能：容易さ。
  アニメーション遅延：0.5s;
  Animation-Iteration-Count：Infinite;
}

これらのプロパティ制御：

• アニメーション名（ @keyframesの名前と一致する必要があります）
• 間隔
• 緩和関数（速度変更方法）
• 開始するのにどれくらい時間がかかりますか
• アニメーションは何回再生されますか（無限は無限ループを意味します）

もちろん、1つの行として略すこともできます。

アニメーション：2S Ease-In-Out 0.5s Infiniteを移動します。

3。シンプルで実用的な例：アニメーションの読み込み

初心者は、一般的なロードアニメーション - 順番に表示され消える種類から練習することができます。

HTML構造はおおよそこのようなものです。

 <div class = "roader">
  <span>。</span>
  <span>。</span>
  <span>。</span>
</div>

その後、CSSアニメーションは次のように書くことができます。

 @KeyFrames Blink {
  0％、80％、100％{不透明：0; }
  40％{不透明：1; }
}

.loaderスパン{
  ディスプレイ：インラインブロック。
  アニメーション：1.4Sの無限の容易さの両方。
}

.loaderスパン：nth-​​child（2）{
  アニメーション遅延：0.2秒;
}

.loaderスパン：nth-​​child（3）{
  アニメーション遅延：0.4s;
}

この例の鍵は、各ポイントに異なるanimation-delayを使用して、ずらして効果を達成することです。

4。無視しやすい場所に注意を払ってください

• ブラウザの互換性：ほとんどの最新のブラウザはanimationをサポートしていますが、IEの古いバージョンと互換性がある場合は、 -webkit-または他のプレフィックスを追加する必要がある場合があります。
• パフォーマンスの問題：ページのパフォーマンスに影響を与えるため、複雑なアニメーションをあまりにも多くの要素に追加しないでください。
• トリガー方法：デフォルトのアニメーションは、ページが読み込まれたときに実行されます。クリックまたはホバリング時にのみ移動する場合は、次のように使用できます:hoverまたはJSを制御できます。
• シンプルに保ちます。最初は複雑な効果を追求しないでください。最初に基本構造をマスターすることがより重要です。

基本的にそれだけです。 CSSアニメーションはもう少し属性に見えますが、 @keyframes覚えてアクションを定義し、 animation制御再生を定義し、それらをいくつかの一般的な属性と組み合わせて、優れたアニメーションを簡単に作成してください。

以上が初心者向けのシンプルなCSSアニメーションチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。