この記事では、複数の CSS アニメーションを同時に再生/追加する実践的なデモを示します。
複数の CSS アニメーションを同時に再生するにはどうすればよいですか?
複数の CSS アニメーションを同時に適用することで、開発者はより魅力的なインターフェイスを簡単に作成できます。多くの CSS アニメーションを同時に再生するには、それぞれに一意の名前を付け、それらの名前をページ上の同じコンポーネントまたは個別のコンポーネントに適用します。
複数のアニメーションを同時に再生/追加するには、次の手順に従います。
ステップ 1: 構造の作成
まず、次の手順でアニメーションが適用される HTML 要素を作成します。たとえば、次のような画像が挿入されます。
< ディビジョン クラス = 'スパン' >
< 画像 送信元 = '本.jpg' 身長 = 「100ピクセル」 幅 = 「100ピクセル」 クラス = 「アニメイト」 >
< / ディビジョン >
上記のコード スニペットでは次のようになります。
- まず、画像パスを「」に設定します。 送信元 ' 属性。
- 次に、「」の値 100ピクセル CSSの「width」と「height」プロパティに「」を設けています。
- また、「」の値を設定します。 アニメーション化する ”へ” クラス ' 属性。
ステップ 2: アニメーションのセットアップ
” キーフレーム 」は、Web ページのニーズに応じてカスタム アニメーションを作成するために利用されます。たとえば、以下のコード スニペットでは 2 つのアニメーションが作成されます。
@-webkit-keyframes スピン {100 % {
変換: 回転 ( 180度 ) ;
}
}
@-webkit-keyframes スケール {
100 % {
変換: スケール X ( 1 ) スケールY ( 1 ) ;
}
}
上記のコード スニペットでは次のようになります。
- まず、「 @-webkit-keyframes 」の仕組みを利用して設定しています。 スピン ' と ' 回転させる 」という名前のアニメーション。
- 次に「」を活用します。 変身 ” の値を持つプロパティ 回転() ' の中に ' スピン 』アニメ本体。この関数は要素を角度「」で回転させます。 180度 ”。
- その後、元の要素を「」倍に拡大または延長するアニメーションを設定します。 1 ” 両方の” バツ ' と ' と の「軸」 規模 』アニメ本体。
ステップ 3: HTML 要素にアニメーションを適用する
CSS部分内でクラス「」を選択します。 アニメーション化する 」に割り当てられている <画像> ” タグを作成し、次の CSS プロパティを指定します。
.animate {位置: 絶対;
左： 60 %;
幅 : 110ピクセル;
身長 : 110ピクセル;
マージン: -40px 0 0 -40ピクセル;
-webkit-animation: スケール 3 秒無限リニア;
-webkit-animation: スピン 2 秒の無限リニア;
}
上記のコード ブロックで使用されるプロパティの説明:
- まず、「」の値を設定します。 絶対 「CSSへ」 位置 ' 財産。 「」を揃えます。 画像 』要素はアニメに合わせて。
- 次に、「」の値を指定します。 60% ”、” 110ピクセル ' と ' 110ピクセル 「CSSへ」 左 ”、” 幅 ' と ' 身長 ' プロパティ。これらのプロパティは、要素の位置とサイズを設定するために利用されます。
- その後、「」の値を設定します。 スケール 3 秒無限リニア ”へ” -ウェブキット-アニメーション ” CSS プロパティ。
- そしてその ' 3秒 ” はそのアニメーションの長さです。 無限 ” はアニメーションの長さであり、” 線形 』のアニメーションの方向性です。
- 最後に、「」の値を指定します。 スピン 2 秒無限リニア 「CSSへ」 -ウェブキット-アニメーション ' 財産。このプロパティは、「」という名前の 2 番目のアニメーションを追加します。 スピン 「」の 画像 ' エレメント。
上記のコード ブロックをコンパイルすると、アニメーションは次のようになります。
上の gif は、「」のみを示しています。 スピン 」アニメーションがターゲットの要素で再生されます。
ステップ 4: HTML 要素で複数のアニメーションを再生する
上記の手順と同様に、要素にはアニメーションが 1 つだけ適用されています。これは、同じ「」に複数の値が割り当てられているためです。 -ウェブキット-アニメーション ' 財産。
この問題を解決するには、ターゲット要素を別の HTML 要素でラップします。 「」として ディビジョン 」は最初のステップですでにラッパーとして使用されているため、その「」を選択します スパン ” と入力し、次のようにコードを更新します。
.animate {位置: 絶対;
左： 60 %;
幅 : 110ピクセル;
身長 : 110ピクセル;
マージン:-40px 0 0 -40ピクセル;
-webkit-animation: スケール 3 秒無限リニア;
}
。 スパン {
位置: 相対的;
上: 160ピクセル;
-webkit-animation: スピン 2 秒の無限リニア;
}
上記のコードでは次のようになります。
- まず、「 アニメーション化する ” クラスはそのまま残り、2 番目のアニメーションのみがクラスから削除され、” スパン ' クラス。
- その後、「」を利用して位置を設定します。 位置 ' と ' 上 ' プロパティ。
上記のコード スニペットを実行すると、Web ページは次のように表示されます。
出力には、選択した HTML 要素に両方のアニメーションが同時に適用されたことが示されています。
結論
複数の CSS プロパティを適用するには、要素を HTML 要素でラップし、アニメーションを適用して、各 HTML 要素が 1 つのアニメーションを保持できるようにします。子プロパティは親 HTML 要素に適用されたアニメーションを継承するため、コンパイラにエラーや曖昧さを引き起こすことなく、複数のアニメーションが適用されます。以上が複数のCSSアニメーションを同時に再生・追加する手順です。