CSSアニメーションで左から右に動かす方法｜初心者でも簡単に実装できるコード例付き

Webサイトに動きをつけたいけど、JavaScriptは難しそう…そんな風に思っていませんか？

実は、CSSだけで要素を左から右にスライドさせるアニメーションを簡単に作れます。ページに訪れた人の目を引くスライドインエフェクトや、ボタンのホバー効果など、使い方は無限大です。

この記事では、CSSアニメーションの基本から実用的なコード例まで、初心者の方でもすぐに実装できるように分かりやすく解説していきますね。

CSSアニメーションってどんな仕組み？

CSSアニメーションは、2つの主要な要素で構成されています。

1. animationプロパティ
アニメーションの動き方を設定する部分で、以下のような項目を指定できます。

アニメーション名
再生時間（animation-duration）
タイミング関数（animation-timing-function）
繰り返し回数（animation-iteration-count）

2. @keyframesルール
アニメーションの具体的な動きを定義する部分です。「最初はこの状態」「最後はこの状態」というように、アニメーションの始点と終点を決めます。

これらを組み合わせることで、スムーズな動きを実現できるんです。

左から右へのアニメーション｜基本編

それでは、実際に要素を左から右に動かすアニメーションを作ってみましょう。

transformプロパティとtranslateXの使い方

要素を横方向に移動させるには、transformプロパティとtranslateX関数を使います。

translateXは、要素を水平方向（横方向）に移動させる関数です。数値が負ならば左に、正ならば右に移動するという仕組みになっています。

/* 要素を左に100px移動 */
transform: translateX(-100px);

/* 要素を右に100px移動 */
transform: translateX(100px);

パーセント（%）で指定すると、要素自身の幅を基準に移動します。

/* 要素の幅分、左に移動（画面外に隠れる） */
transform: translateX(-100%);

実装例：シンプルな左から右へのスライド

HTML

<div class="slide-box">
  左から右にスライドします
</div>

CSS

.slide-box {
  width: 300px;
  padding: 20px;
  background-color: #3498db;
  color: white;
  text-align: center;
  border-radius: 8px;

  /* アニメーションを適用 */
  animation: slideInLeft 1s ease-out;
}

/* アニメーションの動きを定義 */
@keyframes slideInLeft {
  /* 開始時点：画面の左外に配置 */
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  /* 終了時点：元の位置に配置 */
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

このコードのポイントは以下の通りです。

0%の時点でtranslateX(-100%)を指定し、要素を画面の左外に配置
opacity: 0で透明にしておく
100%の時点で元の位置（translateX(0)）に戻し、不透明（opacity: 1）にする
1sで1秒間かけてアニメーション
ease-outで滑らかな動きを実現

アニメーションのカスタマイズ方法

アニメーション時間を変更する

再生時間を変えることで、スピード感を調整できます。

/* 速い動き（0.5秒） */
animation-duration: 0.5s;

/* ゆっくりとした動き（2秒） */
animation-duration: 2s;

イージング（動きの緩急）を変更する

animation-timing-functionプロパティで、動きの緩急を変えられます。

/* 一定速度で動く */
animation-timing-function: linear;

/* ゆっくり始まり、速くなり、ゆっくり終わる */
animation-timing-function: ease;

/* ゆっくり始まり、徐々に速くなる */
animation-timing-function: ease-in;

/* 速く始まり、徐々に遅くなる */
animation-timing-function: ease-out;

繰り返し再生する

アニメーションを繰り返したい場合は、animation-iteration-countを使用します。

/* 3回繰り返す */
animation-iteration-count: 3;

/* 無限に繰り返す */
animation-iteration-count: infinite;

よく使うテクニック

ホバー時にアニメーションを発動

マウスを乗せた時だけアニメーションを実行する方法です。

.slide-button {
  padding: 15px 30px;
  background-color: #2ecc71;
  color: white;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.slide-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  transition: left 0.3s ease;
}

.slide-button:hover::before {
  left: 0;
}

このコードでは、疑似要素（::before）を使って、ホバー時に白い半透明の要素が左から右にスライドする効果を作っています。

スクロールに合わせてアニメーション

スクロールして要素が画面内に入った時にアニメーションを実行するには、JavaScriptと組み合わせる必要がありますが、基本的なCSS部分は以下の通りです。

.slide-element {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease-out;
}

/* JavaScriptでこのクラスを追加する */
.slide-element.is-visible {
  opacity: 1;
  transform: translateX(0);
}

この場合、animationプロパティではなくtransitionプロパティを使うと、状態の変化をスムーズに表現できます。

連続してスライドさせる

複数の要素を順番にスライドさせるには、animation-delayを使います。

.slide-item1 {
  animation: slideInLeft 0.6s ease-out;
}

.slide-item2 {
  animation: slideInLeft 0.6s ease-out;
  animation-delay: 0.2s; /* 0.2秒遅れて開始 */
}

.slide-item3 {
  animation: slideInLeft 0.6s ease-out;
  animation-delay: 0.4s; /* 0.4秒遅れて開始 */
}

実用的なパターン：左からフェードインスライド

実際のWebサイトでよく使われる、フェードインしながらスライドするアニメーションです。

.fade-slide-box {
  width: 400px;
  padding: 30px;
  background-color: #9b59b6;
  color: white;
  border-radius: 10px;
  animation: fadeSlideIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes fadeSlideIn {
  0% {
    transform: translateX(-80px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

cubic-bezier(0.25, 1, 0.5, 1)という値を使うことで、より自然で滑らかな動きを実現しています。これはベジェ曲線と呼ばれる数学的な曲線を使ったイージング関数です。

animationプロパティのショートハンド記法

アニメーション関連のプロパティは、まとめて1行で書くこともできます。

/* 個別に書く場合 */
animation-name: slideInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;

/* ショートハンドで書く場合 */
animation: slideInLeft 1s ease-out 0s 1 forwards;

ショートハンドを使うと、コードがスッキリして読みやすくなりますね。

注意点とベストプラクティス

パフォーマンスについて

アニメーションを実装する際は、パフォーマンスにも配慮しましょう。

推奨される方法：

transformプロパティを使う（GPUアクセラレーションが効く）
opacityプロパティを使う

避けるべき方法：

leftやtopプロパティでのアニメーション
widthやheightのアニメーション（レイアウトの再計算が発生する）

ユーザー体験への配慮

アニメーションは効果的ですが、使いすぎると逆効果になることもあります。

アニメーションの時間は0.3秒〜1秒程度が理想的
重要な情報には控えめなアニメーションを
モーション減少の設定を尊重する（prefers-reduced-motionメディアクエリ）

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}