こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
今回は、CSSアニメーションの基本「@keyframes」の使い方を解説します。書き方の基本から、animationプロパティの一覧、コピペで使えるサンプル、よくある「動かない！」の対処までまとめたので、保存して使ってみてください。
この記事でわかること
- @keyframesの基本の書き方
- animationプロパティの一覧とまとめ書き
- コピペで使えるアニメーションのサンプル
- ホバーやスクロールで動かす方法
- 動かない・最後に戻ってしまうときの対処
@keyframesとは？
@keyframesは、CSSでアニメーションの動きを定義するためのルールです。「最初はこの状態、最後はこの状態」と指定すると、その間をブラウザがなめらかにつないでくれます。
@keyframesのメリット
- JavaScriptを使わず、CSSだけでアニメーションが作れる
@keyframesで動きを作り、animationプロパティで要素に当てる（2つでセット）- 色の変化、フェード、回転、バウンドなど、いろいろな表現ができる
基本的な書き方
基本的な書き方は以下のとおりです。
@keyframes アニメーション名 {
0% {
/* 開始時のスタイル */
}
100% {
/* 終了時のスタイル */
}
}開始と終了だけなら、0% と 100% の代わりに from と to と書いても同じです。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}途中の状態を指定したいときは、% で好きなだけ段階を足せます。
@keyframes changeColor {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}要素に当てる
作った動きは、animation プロパティで要素に当てます。
これで、divの背景色が2秒かけて赤→黄→青と変わり続けます。
div {
width: 100px;
height: 100px;
background-color: red;
animation: changeColor 2s ease-in-out infinite;
}animationプロパティ一覧
animation は、下の8つのプロパティを1行にまとめて書ける「まとめ書き」です。
| プロパティ | 意味 | よく使う値 |
|---|---|---|
animation-name | 使う@keyframesの名前 | fadeIn など |
animation-duration | 1回にかかる時間 | 0.5s、2s |
animation-timing-function | 動きの速さの変化 | ease（初期値）、linear、ease-in-out |
animation-delay | 始まるまでの待ち時間 | 0.3s |
animation-iteration-count | 繰り返す回数 | 1（初期値）、3、infinite（無限） |
animation-direction | 再生する向き | normal、alternate（行って戻る） |
animation-fill-mode | 始まる前・終わった後の状態 | forwards（最後の状態で止める）、both |
animation-play-state | 再生・一時停止 | running、paused |
まとめ書きの順番
/* 名前 | 時間 | 速さの変化 | 待ち時間 | 回数 | 向き | 終わった後 */
animation: fadeIn 1s ease-out 0.3s 1 normal forwards;順番はある程度自由ですが、**時間が2つあるときは「1つ目＝再生時間、2つ目＝待ち時間」**と決まっています。使わない項目は省略できるので、普段は animation: fadeIn 1s ease-out forwards; くらいで十分です。
timing-functionの違い
| 値 | 動き |
|---|---|
linear | 最初から最後まで同じ速さ。回転に向いている |
ease | ゆっくり始まって速くなり、最後はゆっくり（初期値） |
ease-in | ゆっくり始まって、だんだん速くなる |
ease-out | 速く始まって、ゆっくり止まる。表示のアニメーションに向いている |
ease-in-out | ゆっくり始まって、ゆっくり止まる |
cubic-bezier(...) | 速さの変化を自分で細かく指定する |
コピペで使えるサンプル
1. フェードイン（1回だけ表示）
ページを開いたときにふわっと表示させる、一番よく使う動きです。forwards で表示された状態のまま止めます。
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.8s ease-out forwards;
}2. フェードイン・フェードアウト（繰り返し）
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
div {
animation: fadeInOut 3s ease-in-out infinite;
}3. 回転
読み込み中のアイコンなどに使えます。速さを一定にするため linear を使います。
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
div {
animation: rotate 5s linear infinite;
}4. バウンド
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
div {
animation: bounce 1s ease-in-out infinite;
}5. ホバーしたときだけ動かす
:hover に animation を書くと、マウスを乗せたときだけ動きます。ボタンに使うとかわいいです。
.btn:hover {
animation: bounce 0.6s ease-in-out;
}6. スクロールして見えたら動かす
CSSだけでは「画面に入ったら」を判定できないので、少しだけJavaScriptを使います。画面に入った要素に is-show クラスを付けて、アニメーションを開始します。
<div class="js-fade">スクロールすると表示されます</div>.js-fade {
opacity: 0;
}
.js-fade.is-show {
animation: fadeUp 0.8s ease-out forwards;
}const targets = document.querySelectorAll('.js-fade');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-show');
observer.unobserve(entry.target); // 1回だけ動かす
}
});
}, { threshold: 0.2 }); // 要素の20%が見えたら
targets.forEach((el) => observer.observe(el));グラデーションの背景を動かす方法はこちら👇
うまく動かないときの対処 チェックリスト
動かない
アニメーションが動かない時は次の項目を上から順に確認してみてください。
- 名前が一致しているか。
@keyframes fadeInとanimation: fadeinのように、大文字・小文字が違うだけでも動きません。 - 時間を書いているか。
animation-durationの初期値は0sなので、時間を書かないと一瞬で終わってしまいます。 - 単位を付けているか。
animation: fadeIn 1は無効です。1sや500msのように単位が必要です。 - inline要素にtransformを使っていないか。
spanやaなどはそのままではtransformが効きません。display: inline-block;を追加しましょう。 - パソコンの「視差効果を減らす」設定がオンになっていないか。 下で紹介する
prefers-reduced-motionを入れていると、この設定の人には動きが止まります。
止まらない
最初の状態に戻ってしまう場合は、初期設定では、アニメーションが終わると元のスタイルに戻ります。
最後の状態で止めたいときは forwards を付けます。
.fade-up {
animation: fadeUp 0.8s ease-out forwards;
}animation-delay で待ち時間を入れたとき、待っている間に要素が一瞬見えてしまう場合は、both にすると最初の状態（透明）から始まります。
スムーズに動かない
width、height、top、left、margin を動かすと、ブラウザが毎回レイアウトを計算し直すため重くなります。動きはできるだけ transform（移動・拡大・回転）と opacity（透明度）で作ると、なめらかになります。
/* 重い */
@keyframes slideBad { from { left: -100px; } to { left: 0; } }
/* 軽い */
@keyframes slideGood { from { transform: translateX(-100px); } to { transform: translateX(0); } }FAQ
@keyframesを使うと、要素の動きを自由にカスタマイズできるので、Webデザインの幅が広がります。
ぜひ実際にコードを書いて試してみてください！
今後もCSSのテクニックを紹介していくので、お楽しみに😊
ではまた〜👋
