CSSだけ背景色がループするアニメーションを作る方法【初心者向け】
CSSの@keyframesと各種アニメーションプロパティを使えば、JavaScript不要の純粋なCSSだけで、背景色が滑らかにループするアニメーションを作成できます。この記事では、初心者にもわかりやすい手順でその実装方法を解説します。
この例では、HTMLの<body>要素に直接CSSを適用していますが、紹介するコードは任意のHTML要素、クラス、IDに対しても同じように応用できます。
完成版のコード
完成形を確認したい方は、こちらのデモを参考にしてください。
注意：このコードはInternet Explorer 9では動作しません。モダンブラウザでの利用を前提としています。
アニメーションの設計
完成形を正確にイメージできていなくても、コーディングを始める前に進むべき方向性を決めておくことは非常に有効です。今回のループアニメーションについて、あらかじめ以下の3点を決めておきましょう。
- 背景色を何色使用するか？
- アニメーション全体の所要時間はどのくらいにするか？
- どんなアニメーションタイプ（速度カーブ）を使うか？
このチュートリアルではシンプルさを重視するため、以下のように設定します。
- 5種類の異なる背景色
- 全体の所要時間は10秒（各色は2秒ずつ表示）
- リニア（等速）のアニメーションカーブ（開始から終了まで一定の速度）
今回のサンプルでは、Coolors.coを使って調和のとれたカラーパレットを手軽に生成しました。
これから作る背景アニメーションでループさせる、5つの16進数カラーコードは以下の通りです。
- サンセットオレンジ：
#EE6055 - ミディアムアクアマリン：
#60D394 - ペールグリーン：
#AAF683 - メロウイエロー：
#FFD97D - ビビッドタンゼリン：
#FF9B85
カラー名をすべて覚える必要はありません（名称はCoolorsから引用したものです）。ここでは参考情報として記載しているだけです。
これで5色が揃いました。この5色を、各色が2秒ずつ表示されるループアニメーションに組み込んでいきます。
次に、この計画に基づいてアニメーションを作成しましょう。
ループCSSアニメーションの作成
CSSにおいて、アニメーションのkeyframes（キーフレーム）は0%から100%までのパーセンテージで指定します。スタイルシートに以下のCSS keyframesを追加してください。
/* 標準構文 */
@keyframes backgroundColorPalette {
0% {
background: #ee6055;
}
25% {
background: #60d394;
}
50% {
background: #aaf683;
}
75% {
background: #ffd97d;
}
100% {
background: #ff9b85;
}
}これでbackgroundColorPaletteという名前のkeyframesが定義されました。5つのカラー区間が、アニメーション全体（0%～100%）に均等に割り当てられています。
次は、body要素のCSSルールセットを作成し、このカラーパレットを実際に使用できる状態にしましょう。
bodyセレクターのルールセット内に以下のCSSアニメーションプロパティを追加して、ブラウザ上でどのような変化が起きるか確認してみてください。
body {
animation-name: backgroundColorPalette;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}正しく実装できていれば、背景色が2秒間隔で滑らかに次々と遷移し続けるアニメーションが動いているはずです。
CSSの仕組み
ここで、各プロパティがどのような役割を果たしているのかを詳しく見ていきましょう。
- まず、
animation-nameプロパティにbackgroundColorPaletteという値を設定します。これにより、先ほど作成した背景色のkeyframesがbody要素に割り当てられます。 animation-duration:プロパティに10sという値を設定します。これでアニメーションの合計時間が10秒になります。ミリ秒単位で10000と指定することも可能です。animation-iteration-countプロパティにinfiniteという値を設定します。これによりアニメーションが無限にループします。CSSではデフォルトで1回のみ再生される仕様になっています。animation-directionプロパティにalternateという値を設定します。これにより、アニメーションが順方向・逆方向へと交互に再生されます。normalを指定した場合、ループの切り替わり時に不自然なジャンプ（急な色の変化）が発生するため、それを避ける目的でalternateを使用しています。
知っておくと便利なポイント
実はデフォルトでは、CSSアニメーションの速度カーブタイプはlinear（リニア）に設定されています。つまり、リニアな速度カーブを使いたい場合、CSSルールセットで明示的に宣言しなくても自動的に適用されます。先ほどの例でアニメーションが一定の速度で動いたのは、このためです。
ただし、コードの意図をより明確に表現したい場合には、animation-timing-function: linear;をあえて記述しておくのも良いでしょう。特にチームで開発を進めている場合は有効です。CSSにはデフォルトで有効になっている値が数多く存在するため、それらをすべて記憶しておくのは現実的ではありません。
-
CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方
CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1
-
CSSだけで作るタイプライターアニメーションの実装方法を解説
CSSアニメーションを活用すれば、テキストが一文字ずつ打ち込まれていくような「タイプライターアニメーション」を実現できます。JavaScriptに頼らなくても、CSSのsteps()関数と@keyframesを組み合わせるだけで、この演出効果を簡単に作ることが可能です。以下に、その具体的な実装例を紹介します。タイプライターアニメーションの仕組みこのアニメーションでは、主に次のCSSテクニックを組み合わせています。steps()関数：アニメーションをなめらかに変化させるのではなく、段階的に（カクカクと）進めることで、文字が一つずつ打ち込まれるような動きを表現します。overflow: hidde