Webサイトにちょっとした動きを加えるだけで、見る人に与える印象は大きく変わります。なかでも「左から右に動くアニメーション」は、目を引く効果的な演出の一つです。この記事では、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で実装してみましょう。
<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" >left: 0（デフォルト）。transition により、left が変更されたとき1秒かけて動く。.move クラスの付け外しを切り替え、動作をコントロール。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);
}
}
}
position の指定が適切か？（left を使うには relative 以上が必要）@keyframes 名と animation-name の一致transform で移動する場合は、初期値も明示するdisplay:none）CSSアニメーションを使えば、わずかなコードでWebページに動きを加えることができます。とくに「左から右」への動きは、視線誘導や注目度を高めるために非常に有効です。
@keyframes を使って自由に動きをデザインできるtransition は状態変化に適しているtransform は軽量で滑らかなアニメーションを実現可能動きを加えるだけでサイトの印象は大きく変わります。この記事を参考に、あなたのWebサイトにもぜひCSSアニメーションを取り入れてみてください。