CSSを使用して単純なループ背景色アニメーションを作成する方法
キーフレームとさまざまなCSSアニメーションプロパティを使用して、純粋なCSSで単純なアニメーションの背景色ループを作成する方法を学びます。
この例では、HTMLの<body>をターゲットにしています 要素をCSSで直接使用しますが、次のコード例を任意のHTML要素、クラス、またはIDに適用できます。
コード
このデモを参照として使用できます。
注：このコードはIE9では機能しません。
アニメーションの計画
結果がどのようになるか正確にわからない場合でも、自分が進む方向についてのアイデアを持っていることは常に実用的です。コーディングを開始する前に、ループアニメーションについていくつか確立しましょう。
- 何色の背景色を使用しますか？
- アニメーションの合計時間はどのくらい続く必要がありますか？
- どのタイプのアニメーションを使用する必要がありますか？
このチュートリアルの目的は物事を単純にすることなので、以下を使用しましょう：
- 5つの異なる背景色
- 10秒間（各色は2秒間表示されます）
- 線形アニメーション曲線（アニメーションの開始から終了までの速度は同じです）
Coolers.coを使用して、この例の調和のとれたカラーパレットをすばやく生成しました：
これらは、今後の背景アニメーションがループする16進色です：
- サンセットオレンジ：
#EE6055 - ミディアムアクアマリン：
#60D394 - 淡い緑色：
#AAF683 - まろやかな黄色：
#FFD97D - 鮮やかなタンジェリン：
#FF9B85
これらの名前をすべて覚える必要はありません（これらはCoolersから直接取得されています）。念のために追加しました。
これで5つの色ができたので、各色を2秒間表示するループアニメーションを作成します。
次は、計画に基づいてアニメーションを作成します。
ループするCSSアニメーションの作成
CSSでは、アニメーションのキーフレームは0%からのパーセンテージで機能します 100% 。次のCSSキーフレームを追加します スタイルシートへ：
/* Standard syntax */
@keyframes backgroundColorPalette {
0% {
background: #ee6055;
}
25% {
background: #60d394;
}
50% {
background: #aaf683;
}
75% {
background: #ffd97d;
}
100% {
background: #ff9b85;
}
}
これで、backgroundColorPaletteというキーフレームプロパティができました。 0%から均等に分割された5つの色間隔 100% アニメーションの。
次に、body要素のCSSルールセットを作成して、キーフレームのカラーパレットを使用できるようにします。
ボディセレクタールールセット内に次のCSSアニメーションプロパティを追加し、ブラウザーウィンドウで何が起こるかを確認します。
body {
animation-name: backgroundColorPalette;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}すべてが正しく行われた場合、2秒間隔で色から色にスムーズに移行する背景色のアニメーションを継続的に実行する必要があります。
CSSの仕組み
- 最初に、
animation-nameを追加します プロパティを指定し、backgroundColorPaletteの値を指定します —これで、前に作成した背景色のキーフレームがbody要素に割り当てられます。 -
animation-duration:を使用します プロパティを設定し、値を10秒にします。これで、アニメーションの合計時間は10秒になります。ミリ秒10000を使用することもできます 。 -
animation-iteration-countを使用します プロパティを指定し、infiniteの値を指定します 。これにより、アニメーションが継続的にループします。 CSSでは、デフォルトは1です。 アニメーションサイクル。 animation-directionを使用します プロパティを指定し、alternateの値を指定します 。これにより、アニメーションが最初から最後まで、そして最後から最初まで再生されます。normalを使用した場合に発生する醜いジャンプを回避するために、このプロパティ値を使用します アニメーションの方向の値。
知っておきたい
デフォルトでは、CSSアニメーションの速度曲線タイプは線形に設定されています 。これは、CSSルールセットでプロパティを使用するときにそのプロパティを宣言する必要がないことを意味します。そのため、前の例のアニメーション速度曲線は直線的に実行されます。
ただし、animation-timing-function: linear;を追加することもできます。 特にチームで作業する場合は、CSSルールセットを使用してコードをより表現力豊かにします。 CSSですべてのプロパティ値がデフォルトで有効になっていることを覚えておくのは難しいです。
-
CSSでプレースホルダー属性の色を変更するにはどうすればよいですか？
CSSでプレースホルダー属性の色を変更するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, s
-
CSSでタイプライターアニメーションを作成する方法は？
CSSアニメーションの助けを借りて、JavaScriptを使用してタイプライターアニメーションを作成できます。 次の例は、この効果を示しています。 例 <!DOCTYPE html> <html> <head> <style> div { margin: 2%; font-family: Courier, monospace; display: inline-block; } div > div { overflow: hidden;