はじめに：なぜ translateX() なのか？
Web開発において、要素を左右にスライドさせる場面は多くあります。サイドバーの開閉、バナーのマーキー、ローディングスケルトンなどが代表例です。そんなとき、最もシンプルでパフォーマンスに優れた方法が CSS の transform: translateX() です。
translateX() は、要素を水平方向に移動させる CSS 関数です。transform プロパティ内で使用し、正の値で右、負の値で左に移動します。レイアウトに影響を与えずに視覚的な移動だけを行うため、モバイル環境でのアニメーションパフォーマンスが特に重要な場面で重宝します。
この記事では、translateX() の基本構文から、実務でよく使うサンプルコード、そして注意すべきポインターイベントの問題まで、順を追って解説します。
本記事は CSS-Tricks の translateX() ドキュメント を基に、日本の開発者向けに再構成したものです。
基本構文と使い方
translateX() は単一の引数を受け取ります。引数には長さの単位（px, em, ch など）またはパーセンテージ（%）を使用できます。
- 長さの単位: 正の値で右、負の値で左に指定した長さだけ移動します。
- パーセンテージ: 要素自身の**幅（width）**を基準に移動します。例えば、幅が 400px の要素に
translateX(50%)を適用すると、200px 右に移動します。
/* 要素を右に80px移動 */
.translate-right {
transform: translateX(80px);
}
/* 要素を左に24ch移動 */
.translate-left {
transform: translateX(-24ch);
}
/* 要素を自身の幅の50%分右に移動 */
.translate-half {
transform: translateX(50%);
}
実践例：サイドバーのスライド
最も一般的な用途は、ボタンクリックでサイドバーをスライドさせる機能です。最初にサイドバーを画面外に隠し、クリックで再び表示します。
.sidebar {
transform: translateX(-100%);
transition: transform 0.2s ease-in;
}
.sidebar.open {
transform: translateX(0);
}
実践例：無限マーキー
ショッピングサイトのバナーやクライアントのロゴを自動スクロールさせる際にも translateX() は便利です。マーキーコンテンツを50%左に移動させるアニメーションを無限に繰り返します。
.marquee-content {
animation: marquee-scroll 20s linear infinite;
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
実践例：スケルトンローディングアニメーション
コンテンツ読み込み中に表示するスケルトンローダーに、光が走るエフェクトを追加できます。::after 疑似要素を作成し、translateX() で移動させます。
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-120%);
background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
注意点：レイアウトへの影響とポインターイベントの問題
レイアウトに影響を与えない
translateX() は他の transform 関数と同様に、文書フロー（document flow）に影響を与えません。 要素が移動しても周囲の要素の位置はそのままで、元の位置にはスペースが保持されます。margin や position を操作する際に発生するレイアウトのリフロー（reflow）がないため、パフォーマンス上の利点が大きいです。
/* 移動された要素 */
.translated {
position: absolute;
top: 0;
left: 0;
transform: translateX(80px);
}
ポインター擬似クラスとの衝突
translateX() を :hover などのポインター擬似クラスに直接適用すると問題が発生することがあります。要素がカーソルから離れると :hover 状態が解除され、要素が元の位置に戻ると再び :hover が適用され、無限にチラつく現象が起こります。
問題のあるコード:
.bad:hover {
transform: translateX(160px);
}
解決方法:
親要素に :hover を適用し、子要素を移動させる構造にすればチラつきを防げます。
.parent:hover .good {
transform: translateX(160px);
}
このパターンは、ツールチップやドロップダウンメニューを作成する際に頻繁に遭遇する問題なので、ぜひ覚えておいてください。
ブラウザサポート
translateX() はすべてのモダンブラウザでデフォルトでサポートされています。IE を除けば、実質的に制約はありません。
日本市場での適用ポイント
日本のWebサービスでも translateX() は非常に頻繁に使用されます。特に、モバイルWebでハンバーガーメニューを開く際のサイドバースライドや、バナーカルーセルをスムーズに動かす際に便利です。
一方、日本のモバイル環境では、ローエンドデバイスの割合が高いため、アニメーションパフォーマンスに注意が必要です。transform はGPUアクセラレーションを受けるため、margin-left や left の値変更よりも滑らかですが、多くの要素に同時に適用するとフレームドロップが発生する可能性があります。アニメーション中は不要なレイアウト変更を避け、可能であれば will-change を適切に活用してください。
また、日本の企業サイトではまだIEサポートが必要なケースが散見されます。IEでは transform が接頭辞なしでサポートされていないため、必要に応じて -ms-transform を追加することを検討してください。
まとめ：実践適用の整理
translateX() はシンプルですが非常に強力なCSS関数です。レイアウトに影響を与えずに要素を水平移動でき、アニメーションパフォーマンスも優れています。
- サイドバースライド:
translateX(-100%)で非表示 →translateX(0)で表示 - 無限マーキー:
translateX(-50%)を繰り返すキーフレーム - スケルトンローダー:
::afterにtranslateX()で光沢エフェクト - ポインターイベント問題: 親要素に
:hoverを適用
次のステップとしては、translateY() や scale()、rotate() など他の transform 関数を組み合わせて使う方法を学ぶことをおすすめします。また、CSSアニメーションのパフォーマンス最適化に興味がある場合は、Web Fundamentalsのアニメーションガイド を参照してください。