はじめに
最近のWebサイトでは、ボタンのホバーやページ遷移、ロード中のインジケーターなど、さまざまな場面でアニメーションが使われています。CSSの@keyframesは、そんなアニメーションを簡単に実現できる強力な機能です。
この記事では、@keyframesの基本的な使い方から応用的なテクニックまで、実用的なコード例とともに解説していきます。
使うべき場面
@keyframesは以下のようなケースで活躍します。
- ボタンにホバーしたときにふわっと浮き上がるアニメーション
- ローディング中のスピナーやバー
- スクロール時に要素がフェードインして表示される
- ページ全体のトランジションや演出
JavaScriptを使わなくても、CSSだけで滑らかなアニメーションが実現できるため、パフォーマンスや開発効率の観点でもおすすめです。
基本的な使い方
CSSアニメーションの基本的な構文は以下の通りです。
style.css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 1s ease-in-out forwards;
}
index.html
<h1 class="fade-in">こんにちは</h1>
解説
-
@keyframesでアニメーションの変化を定義 -
.fade-inクラスでそのアニメーションを適用 -
1sはアニメーションの長さ -
ease-in-outはイージング（動きの速さの変化） -
forwardsはアニメーション後の状態を保持
応用的な使い方
1. 無限ループでローディングスピナー
style.css
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 1s linear infinite;
width: 80px;
height: 20px;
}
index.html
<p class="spinner">こんにちは</p>
回転します。
2. 複数プロパティの変化
style.css
@keyframes slideAndFade {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.siide-and-fade {
animation: slideAndFade 1s linear forwards;
}
index.html
<p class="siide-and-fade">こんにちは</p>
要素が下から上へふわっと表示されます。
3. ステップごとの変化（中間地点）
style.css
@keyframes realisticBounce {
0% {
transform: translateY(0) scaleY(1);
animation-timing-function: ease-in;
}
20% {
transform: translateY(100px) scaleY(1.1);
animation-timing-function: ease-out;
}
40% {
transform: translateY(30px) scaleY(1);
animation-timing-function: ease-in;
}
60% {
transform: translateY(100px) scaleY(1.05);
animation-timing-function: ease-out;
}
80% {
transform: translateY(70px) scaleY(1);
animation-timing-function: ease-in;
}
100% {
transform: translateY(100px) scaleY(1.02);
}
}
.bounce {
animation: realisticBounce 1.2s forwards;
width: 50px;
height: 50px;
background-color: cyan;
border-radius: 50%;
}
index.html
<p class="bounce"></p>
ボールがバウンドする動きを表現しています。
おしゃれな使い方
1. 背景グラデーションのゆるやかな変化
style.css
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.gradient-bg {
background: linear-gradient(-45deg, #e66465, #9198e5, #f6d365, #fda085);
background-size: 300% 300%;
animation: gradientShift 8s ease infinite alternate;
}
index.html
<body class="gradient-bg">
</body>
背景グラデーションがどんどん変化していきます。
2. 文字のタイピング風アニメーション
style.css
@keyframes typing {
from { width: 0 }
to { width: 9ch; }
}
.typing-text {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid;
width: 0;
animation: typing 1s steps(20, end) forwards;
}
index.html
<h1 class="typing-text">こんにちは</h1>
タイピング風になっていることがわかります。
animation:に渡せるプロパティ
animation: realisticBounce 1.2s forwards;
上記だけ見てもわかりにくいため、分解して解説します。
animation に含まれるプロパティ一覧（全9個）
| 順 | プロパティ名 | 例 | 説明 |
|---|---|---|---|
| ① | animation-name |
slideAndFade |
実行する @keyframes 名 |
| ② | animation-duration |
1s, 500ms
|
アニメーションの長さ |
| ③ | animation-timing-function |
ease, linear, cubic-bezier()
|
イージング（速度の変化） |
| ④ | animation-delay |
0.3s |
開始までの遅延時間 |
| ⑤ | animation-iteration-count |
1, infinite
|
繰り返し回数 |
| ⑥ | animation-direction |
normal, reverse, alternate
|
再生方向 |
| ⑦ | animation-fill-mode |
none, forwards, backwards, both
|
前後の状態を保持するかどうか |
| ⑧ | animation-play-state |
running, paused
|
アニメーションを再生 or 一時停止 |
| ⑨ | animation-timeline |
scroll()・view() など |
スクロール・要素表示などと連動） |
1行で書く時の注意点
完全な順番指定は必須ではありませんが、ある程度の順序ルールに従わないと正しく解釈されないため、事実上、順番に気をつける必要があります。
ブラウザはキーワードで判別してくれます。
分割して書くのもアリ
style.css
.sample {
animation-name: demo;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
よく使うパターン
一度だけ再生して最終状態を保持
style.css
animation: slideAndFade 1s ease-out forwards;
3回繰り返して終了
style.css
animation: slideAndFade 1s linear 0s 3 normal forwards;
無限ループで交互に再生
style.css
animation: bounce 0.8s ease-in-out infinite alternate;
Tips
-
プレフィックスに注意：最近のブラウザでは不要ですが、古い環境では
-webkit-などが必要な場合があります。 -
パフォーマンス対策：
transformやopacityは比較的パフォーマンスに優れたプロパティです。 - JavaScriptとの連携：クラスの追加/削除でアニメーションのトリガーを制御できます。
-
animation-delayやanimation-iteration-countを使えば、アニメーションの開始タイミングや繰り返し回数も調整可能です
最後に
CSSの@keyframesを使えば、ちょっとしたUIの演出から本格的なアニメーションまで簡単に実現できます。JavaScriptを使わなくても多彩な表現が可能なので、ぜひ積極的に活用してみてください。
Webに動きを与えることで、ユーザー体験がグッと向上します。この記事が、CSSアニメーションの導入の第一歩となれば幸いです。