1.@keyframesとは？
@keyframesは、CSSだけでアニメーション（動き）を作るための仕組みです。
たとえば、
- テキストをフェードインさせたい
- ボタンをふわっと浮かせたい
- 画像をスライドさせたい
といった「動き」を、JavaScriptを使わずCSSだけで実現できます。
どういう仕組み？
@keyframesでは、要素の**変化前（from）と変化後（to）**のスタイルを指定します。
この2つの間を、CSSが自動で補間してスムーズに動かしてくれるんです！
できることの例
- フェードイン／アウト
- スライド（横・縦）
- 回転（rotate）
- 拡大・縮小（scale）
- 色や位置の変化
つまり @keyframes を使うことで、**Webページに自然な「動き」と「表現力」**を加えることができるんです！
2.@keyframesの基本構文
🧩 基本形
@keyframes アニメーション名 {
from {
/* 最初の状態 */
}
to {
/* 最後の状態 */
}
}たとえばこんな感じ：
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}この例では、透明（opacity: 0）から完全に表示（opacity: 1）まで変化するアニメーションが作られます。
また、より細かく制御したいときは？
from / to の代わりに、0%〜100%の割合で指定することもできます。
@keyframes moveBox {
0% {
left: 0;
}
50% {
left: 100px;
}
100% {
left: 0;
}
}→ 途中で一度右に移動して、元に戻るような動きができます。
3.実例①：フェードインアニメーションを作ってみよう
まずは、画面にふわっと現れる「フェードインアニメーション」を作ってみましょう。
🧩 HTML（例）
<p class="fade-in">こんにちは、世界！</p>🎨 CSS
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 5s ease-in-out;
}↓ここが見える位置でブラウザをリロード（再読み込み）してみて
こんにちは、世界！
🔍 解説：
| 部分 | 説明 |
|---|---|
@keyframes fadeIn | アニメーションの定義 |
from → to | 透明 → 表示 に変化 |
animation | 5秒かけて fadeIn を実行、動き方は ease-in-out |
結果、ページ読み込み時に、<p> タグの文字がふわっと表示されます！
4.実例②：スライドインアニメーション
次は、画面の外から要素をスライドさせて表示するアニメーションを作ります。
🧩 HTML（例）
<div class="slide-in">ようこそ！</div>🎨 CSS
@keyframes slideIn {
from {
transform: translateX(-100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.slide-in {
animation: slideIn 1s ease-out;
}↓ここが見える位置でブラウザをリロード（再読み込み）してみて
🔍 解説：
| 部分 | 説明 |
|---|---|
transform: translateX(-100px) | 左に100pxずらしてスタート |
translateX(0) | 元の位置に戻る（スライドイン） |
opacity の併用 | 動き＋フェードで自然な見た目に |
結果、ページ表示時に、要素が左からスーッと移動して現れます！
ちなみに
translateXの他にも、
translateY（上下）scale（拡大・縮小）rotate（回転）
なども組み合わせて使えます！
5.よく使うanimationプロパティ
@keyframesでアニメーションを定義したあと、
実際に動かすときに使うプロパティがこちら👇
🔧 主なanimationプロパティ一覧
| プロパティ | 内容 |
|---|---|
animation-name | 使用するアニメーション名 |
animation-duration | 動く時間（秒など）例：2s |
animation-timing-function | 動き方（速さの変化）例：ease, linear |
animation-delay | 開始までの待ち時間 例：1s |
animation-iteration-count | 何回くり返すか。infiniteで無限 |
animation-fill-mode | 終了後の見た目。forwardsで最終状態を維持 |
🧪 例：ループするアニメーション
.loading {
animation: fadeIn 1s linear infinite;
}ずっとフェードインし続ける（ちょっとギラつく動きになるけど！）
6.まとめ
今回は、CSSの@keyframesを使ってアニメーションを作る方法を紹介しました。
✅ この記事で学んだこと
@keyframesはCSSでアニメーションを定義できる機能from〜to、または0%〜100%で動きの流れを作れるanimationプロパティでアニメを実行できる- フェードインやスライドインなど、よく使う動きが簡単に作れる
💬 一言まとめ
CSSだけで、Webページに「動き」や「魅力」を加えられるのが@keyframesのすごいところ！
これで @keyframes の基本をしっかり理解できるはず！
まずは今回のコードをマネして、自分なりの動きを作ってみましょう！💡
コメント