@keyframes を使用して CSS3 でアニメーションを作成する方法を例とともに説明します

アニメーション化されたプロパティは、サイズ、数量、パーセンテージ、色など、ある値から別の値に徐々に変化します。 @keyframes を使用して、ある CSS スタイル設定を別の CSS スタイル設定に徐々に変更してアニメーションを作成します。仕事でもアニメーションはよく使われます。次にアニメーションの使い方を紹介します。

1. @keyframes 構文ルール
アニメーションプロセス中に、CSS スタイルを複数回変更できます。いつ変更するかを%、または0%から100%と同じキーワード「from」と「to」を使用して指定します。 0% はアニメーションの開始時、100% はアニメーションの終了時です。ブラウザーを最適にサポートするには、セレクターを常に 0% および 100% として定義する必要があります。

@keyframes はアニメーションであり、複数の変換で構成されるグループとして理解できます。
構文:
@keyframes アニメーション名 {
from{ css1}
to{ css2 }
}

@keyframes アニメーション名 {
0% {css1}
50% {css2}
100% {css3}
}
注: アニメーション属性を使用してアニメーションの外観を制御し、セレクターを使用してアニメーションをバインドします。

2. アニメーション属性値

このアニメーションを呼び出すときにアニメーションを使用します。アニメーションは 6 つの属性で構成されます:

animation-name はセレクターにバインドされるキーフレームの名前を指定します
animation-duration はアニメーションにかかる秒数を指定しますまたはミリ秒単位で完了します
animation-timing-function アニメーションがサイクルを完了する方法を設定します
animation-delay アニメーションが開始するまでの遅延間隔を設定します
animation-iteration-count アニメーションが再生される回数を定義します
animation-direction を指定します順番に逆再生するかどうか アニメーション
アニメーション: アニメーション名の時間速度カーブが開始されると、遅延した再生回数が逆の順序で再生されます
例:

正方形を左上隅から右に移動させます右上隅、右下隅、左下隅、そして最後に左上隅に戻ると、それに応じて色も変わります

div{animation:mymove 5s infinite;
 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
 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;}
}

上記の内容はアニメーションの使用方法を紹介するための作業がまだ必要です。自分で叩いて、もっとノックして、さまざまな効果を試してみてください!

以上が@keyframes を使用して CSS3 でアニメーションを作成する方法を例とともに説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。