目次
CSSアニメーションとは
CSSアニメーションとは、JavaScriptを使わずに要素の動きや変化を表現できる仕組みです。
フェード表示やスライド演出など、Webサイトの印象をやさしく高める演出に多く使われます。
特に近年は、軽量で実装しやすいことから、CSSだけでアニメーションを行うケースが増えています。
アニメーションを使うメリット
CSSアニメーションを使うことで、次のようなメリットがあります。
- 画面の切り替わりが自然になる
- ユーザーの視線誘導がしやすくなる
- JavaScriptに比べて実装が簡単
- パフォーマンスへの影響が少ない
重要なのは、動かしすぎないことです。
あくまで補助的な演出として使うのがポイントです。
transitionとanimationの違い
CSSアニメーションには、大きく分けて2種類あります。
- transition
- animation
それぞれの特徴を理解して使い分けましょう。
transitionの特徴
transitionは、状態が変化したときの動きを制御します。
.box {
opacity: 0;
transition: opacity 0.4s ease;
}
.box.is-show {
opacity: 1;
}- hoverやクラスの切り替えと相性が良い
- 記述がシンプル
- 1回の変化向き
animationの特徴
animationは、自動再生や繰り返しが可能です。
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
animation: fade 0.6s ease forwards;
}- ページ読み込み時の演出に向いている
- 複雑な動きが作れる
- 制御がやや多くなる
フェードインの基本実装
最もよく使われるのがフェードインです。
.fade-in {
opacity: 0;
transition: opacity 0.6s ease;
}
.fade-in.is-active {
opacity: 1;
}このように、opacityを0から1へ変化させるだけで、やさしい演出になります。
フェードアウトの基本実装
フェードアウトも同じ考え方です。
.fade-out {
opacity: 1;
transition: opacity 0.6s ease;
}
.fade-out.is-hidden {
opacity: 0;
}表示・非表示を切り替える場面でよく使われます。
スライド＋フェードの組み合わせ
フェードだけでなく、移動を組み合わせるとより自然です。
.slide-fade {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-fade.is-active {
opacity: 1;
transform: translateY(0);
}「少し下からふわっと表示される」定番の演出です。
ホバー時のフェード演出
ボタンやカードの演出にはhoverが向いています。
.card {
transition: opacity 0.3s ease;
}
.card:hover {
opacity: 0.7;
}シンプルでも、操作感が大きく向上します。
animationでフェードを作る場合
ページ表示時の演出にはanimationが便利です。
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-animation {
animation: fadeIn 0.8s ease forwards;
}forwardsを指定することで、最終状態を保持できます。
よく使うanimationプロパティ
animationでよく使う指定です。
- animation-duration：再生時間
- animation-timing-function：動きの速さ
- animation-delay：開始までの遅延
- animation-iteration-count：繰り返し回数
- animation-fill-mode：終了後の状態
必要なものだけ使うのがコツです。
アニメーション使用時の注意点
CSSアニメーションを使う際は、以下に注意しましょう。
- 動かしすぎない
- 読み込みを妨げない
- transformとopacity中心で使う
- 意味のある要素だけに使う
派手すぎる演出は、逆にユーザー体験を損ないます。
実務でよく使われる場面
CSSフェードアニメーションは、次のような場面でよく使われます。
- セクション表示時の演出
- カード・ボタンのホバー
- モーダル表示
- スライドメニューの開閉
HP Build Studioの制作現場でも、フェード系アニメーションは最も使用頻度が高い表現です。
まとめ
CSSアニメーションは、少し加えるだけでサイトの印象を大きく向上させられます。
- transitionとanimationを使い分ける
- フェードは最も汎用性が高い
- transformと組み合わせると自然
- 使いすぎないことが大切
まずはフェードインから試し、慣れてきたら応用表現に挑戦してみてください。