CSS トランジションとアニメーションの基本
複雑なJavaScriptなしに、CSSだけで滑らかなアニメーションを実装する方法を学びます。トランジション、キーフレーム、タイミング関数の活用で、ユーザー体験を大きく向上させましょう。
アニメーションがなぜ大切なのか
ボタンがサッと色が変わる。ページが読み込まれるときにふんわり現れる。フォーム入力時にエラーメッセージがスライドしてくる。こうした小さなアニメーションって、ユーザーに安心感を与えるんです。
昔は、こういう動きをつけるにはJavaScriptが必須でした。でも実は、CSSだけで十分。むしろCSSの方が軽くて、パフォーマンスも良いんですよ。それにコードも簡潔。一度学べば、あらゆるプロジェクトで活躍します。
この記事で学べること
- transitionプロパティの使い方
- @keyframesを使った複雑なアニメーション
- タイミング関数（easing）の選び方
- 実践的なコード例とベストプラクティス
トランジション：状態の変化を滑らかに
トランジションは、CSSプロパティの値が変わるとき、その変化を時間をかけて行うというもの。例えば、ボタンをホバーしたとき、背景色がパッと変わるのではなく、ゆっくり変わる感じですね。
基本的な書き方は、とってもシンプルです。
button {
background-color: #06b6d4;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0891b2;
}
この例では、ボタンの背景色が0.3秒かけてゆっくり変わります。easeはタイミング関数で、変化のスピードをコントロールするもの。最初は遅く、途中で速く、最後はまた遅くなるイメージです。
教育目的での記事です
この記事の内容は教育・学習目的で提供されています。実装時の環境やブラウザのバージョンによって、動作が異なる場合があります。常に公式ドキュメントを参照し、本番環境での実装前に十分なテストを行うことをお勧めします。
キーフレーム：複雑なアニメーションを作る
トランジションはAからBへの変化という単純な動き向けです。でも、もっと複雑な動きをしたい場合は？例えば、回転して、色も変わって、さらに拡大する...みたいな。そこで登場するのが@keyframesです。
キーフレームを使えば、アニメーションの途中の各ステップを細かく指定できるんです。0%の状態、50%の状態、100%の状態...という感じで。
@keyframes slideInAndRotate {
0% {
opacity: 0;
transform: translateX(-100px) rotateZ(0deg);
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
transform: translateX(0) rotateZ(360deg);
}
}
.element {
animation: slideInAndRotate 1s ease-in-out;
}
このアニメーションでは、要素が左から滑りながら、同時に回転して、透明度も変わります。1秒かけて、ゆっくり...ってやつですね。
タイミング関数：動きのリズムを整える
アニメーションの感じって、タイミング関数で大きく変わるんです。同じ0.3秒の変化でも、どう変化するかで、全然違う印象になります。
よく使われるタイミング関数をいくつか紹介します。
linear
最初から最後まで、同じスピードで変化。機械的な感じ。
ease
最初と最後は遅く、途中が速い。最も自然な動き。
ease-in
最初は遅く、だんだん速くなる。加速する感じ。
ease-out
最初は速く、だんだん遅くなる。減速する感じ。
cubic-bezier
自分で曲線を指定。細かくコントロールできます。
実装のコツとベストプラクティス
アニメーションを実装するときに気をつけるポイント、いくつかあります。
まず、パフォーマンス。transform と opacity は、ブラウザが効率的に処理できるプロパティです。width や left みたいなプロパティをアニメーションさせると、ブラウザがレイアウトを何度も再計算して、重くなります。だから、できるだけ transform を使いましょう。
次に、アニメーション時間。長すぎるアニメーションはユーザーをイライラさせます。ボタンのホバー効果なら0.20.3秒、ページ遷移なら0.51秒、くらいが目安です。
そして、アクセシビリティ。中には、アニメーションで気分が悪くなる人もいます。prefers-reduced-motion メディアクエリを使って、そういう人のためにアニメーションを無効にできます。
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
1
transform を使おう
width や left ではなく、transform でアニメーション。パフォーマンスが全然違います。
2
時間は短く
0.20.3秒が基本。ユーザーがストレスを感じない長さが重要。
3
アクセシビリティ対応
prefers-reduced-motion に対応。誰もが快適に使える設計。
まとめ：小さな動きが大きな違いを生む
CSSアニメーションは、シンプルだけど、ものすごく強力。ボタンがホバーで色が変わる。ページが読み込まれるときに要素が現れる。フォームの入力エラーがスライドしてくる。こうした小さな動きが、ユーザーの信頼感を生むんです。
あなたのプロジェクトに、今日から導入してみてください。JavaScriptは不要。CSSだけで十分。コードも簡潔で、保守も楽。ユーザーの体験が、グッと良くなりますよ。
関連記事をもっと読む
