CSSアニメーションで要素を左から右に動かす！基本から応用まで徹底解説

Webサイトにちょっとした動きを加えるだけで、見る人に与える印象は大きく変わります。なかでも「左から右に動くアニメーション」は、目を引く効果的な演出の一つです。この記事では、CSSを使って要素を左から右にアニメーションさせる基本的な方法から、応用テクニックまで、実際のコードとともに詳しく解説します。初心者でも安心して試せるように丁寧に説明していきますので、ぜひ最後までご覧ください。

CSSアニメーションとは？
基本：左から右に移動するアニメーションの作り方
1. 解説
transitionを使ってクリックで動かす方法
1. 解説
transform: translateX() を使うアニメーション
1. 解説
アニメーションを一度だけ実行する場合
ホバーでアニメーションを発動させる方法
1. ポイント
メディアクエリと組み合わせたレスポンシブ対応
1. 解説
よくあるエラーと対処法
1. アニメーションが動かない場合のチェックリスト
まとめ

CSSアニメーションとは？

CSSアニメーションとは、HTML要素のスタイルを時間の経過とともに変化させる手法です。JavaScriptを使わずに動きのあるページを作れるため、最近では多くのWebサイトで利用されています。

具体的には、@keyframesというルールを使って、スタイルの変化を定義します。アニメーションには以下の2つの主な種類があります。

transition：ある状態から別の状態に変化する時に使用
@keyframes：複数ステップで細かい動きを指定できる

今回は「左から右に動かす」アニメーションを実現するため、@keyframesを中心に紹介します。

基本：左から右に移動するアニメーションの作り方

まずは、最もシンプルな「左から右に移動する」CSSアニメーションの例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: tomato;
      position: relative;
      animation: slide-right 2s linear infinite;
    }

    @keyframes slide-right {
      0% {
        left: 0;
      }
      100% {
        left: 300px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

解説

position: relative; が必要です。これがないと left プロパティが機能しません。
@keyframes slide-right で、left: 0 から left: 300px への移動を定義。
animation プロパティで、2秒かけて動き、linear に等速で、infinite で繰り返す設定です。

transitionを使ってクリックで動かす方法

次はユーザー操作に応じて「左から右」へ動くアニメーションをtransitionで実装してみましょう。

<style>
  .move-box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: relative;
    transition: left 1s ease;
  }

  .move-box.move {
    left: 200px;
  }
</style>

<div class="move-box" onclick="this.classList.toggle('move')"></div>

解説

初期状態では left: 0（デフォルト）。
transition により、left が変更されたとき1秒かけて動く。
JavaScript（インライン）で .move クラスの付け外しを切り替え、動作をコントロール。

transform: translateX() を使うアニメーション

left の代わりに transform を使うと、よりスムーズでパフォーマンスの良いアニメーションになります。

<style>
  .slide-box {
    width: 100px;
    height: 100px;
    background: limegreen;
    transform: translateX(0);
    animation: moveX 2s ease-in-out infinite;
  }

  @keyframes moveX {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(300px);
    }
  }
</style>

<div class="slide-box"></div>

解説

transform: translateX() はレイアウトを変更せず動かせるため、ブラウザの最適化が効きやすい。
translateX(300px) で横方向に300px移動。
レスポンシブ対応にも向いています。

アニメーションを一度だけ実行する場合

繰り返しでなく、1回だけ動かしたい場合は animation-iteration-count を 1 に設定します。

animation: slide-right 2s ease-in-out 1;

もしくは、省略して以下のように書いてもOKです：

animation: slide-right 2s ease-in-out;

デフォルトで1回だけ再生されます。

ホバーでアニメーションを発動させる方法

ユーザーがマウスを当てたときだけアニメーションをさせるには、次のようにします。

<style>
  .hover-box {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: relative;
    transition: transform 0.5s ease-in-out;
  }

  .hover-box:hover {
    transform: translateX(200px);
  }
</style>

<div class="hover-box"></div>

ポイント

transition を使うことで、ホバー時にスムーズに変化。
hover 擬似クラスに transform を指定することで「マウスオーバー → 横移動」が可能に。

メディアクエリと組み合わせたレスポンシブ対応

モバイルやタブレットでも正しく動かすには、メディアクエリで条件分岐してスタイルを調整しましょう。

@media screen and (max-width: 768px) {
  .box {
    animation: slide-right-mobile 2s ease-in-out;
  }

  @keyframes slide-right-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(150px);
    }
  }
}