【初心者向け】CSSだけでここまでできる！基本から応用までのアニメーション実装ガイド

アニメーションの基本：transitionとanimationの違い

CSSアニメーションには、主に transition と @keyframes を使う animation の2種類があります。

transition

transition は、ある状態から別の状態に変化する時のアニメーションを定義します。

.button {
    background-color: #3498db;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #2980b9;
}

このように、hoverしたときに色がスムーズに変化する効果が得られます。

animation（@keyframes）

@keyframes を使うと、より自由度の高いアニメーションを実現できます。

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

このクラスを付けた要素は、表示時にフェードインします。

よく使うCSSアニメーションのパターン

フェードイン・フェードアウト

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-out {
    animation: fadeOut 1s forwards;
}

スライドイン（横から）

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

バウンド（跳ねる）

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.bounce {
    animation: bounce 0.6s infinite;
}

応用テクニック：アニメーションの遅延・繰り返し・複数指定

アニメーションの遅延

.delay-anim {
    animation: fadeIn 1s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

アニメーションの繰り返し

.repeat-anim {
    animation: bounce 1s infinite;
}

複数のアニメーションを連続で実行

.multi-anim {
    animation: fadeIn 1s ease-in-out, slideInLeft 0.5s ease-out 1s;
}

実用例：カードホバーで立体的に浮き上がる演出

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

まとめ：CSSアニメーションでインタラクティブなWeb体験を

CSSだけでも、十分に魅力的なアニメーションを実現できます。transition での簡易的な変化から、@keyframes を用いた複雑なアニメーションまで、適切に使い分けることでUXを向上させることが可能です。今回紹介したテクニックを元に、自分のサイトにもぜひ動きを取り入れてみてください。