translateY()

translateY() 関数は、指定した量だけ要素を垂直方向に移動します。

CSS-Tricks · Jun 25, 2026

CSS の translateY() 関数は、指定した量だけ要素を垂直方向に移動します。具体的には、値が正か負かによって、要素を上または下に移動させます。

.parent:hover .box {
  transform: translateY(50%); /* 要素の高さの半分だけ下に移動 */
}

他の transform 関数と同様に、transform プロパティの中で使用されます。

CSS Transforms Module Level 1 のドラフトで定義されています。

Syntax

translateY() 関数の構文は次のようになります：

<translateY()> = translateY( <length-percentage> )

つまり、要素をこの値だけ垂直方向に移動（translate）するという意味です。

Arguments

/* <length> */
translateY(80px) /* 要素が80px 下に移動 */
translateY(-24ch) /* 要素が24ch 上に移動 */

/* <percentage> */
translateY(50%) /* 要素が要素の高さの50%分 下に移動 */
translateY(-100%) /* 要素が要素の高さの100%分 上に移動 */

translateX() 関数は、要素をどの程度どの方向（上：負の値、下：正の値）に移動するかを指定する単一の <length-percentage> 引数を取ります。

引数には <length> または <percentage> のいずれかを指定できます：

<length>: 正の値（例: 20px）の場合、要素を20ピクセル下に押し上げ、負の値（例: -20px）の場合は20ピクセル上に押し上げます。
<percentage>: パーセント値は要素の高さに相対的です。したがって、高さ100pxの要素に対して translateY(40%) を指定すると要素を 40px 下に押し上げ、translateY(-40%) を指定すると 40px 上に押し上げます。

Basic usage

translate 関数はドキュメントフローを乱さないため、シンプルなアニメーションに適しています。特に translateY() 関数は、要素が下からスライドしてくる「ポップアップ」や「フェードイン」アニメーションに適しています。例として、ユーザーがボタンをクリックしたり下にスクロールしたりしたときに上方向にスライドするカードコンポーネント（ここでは .stat-card とします）を見てみましょう。

コンポーネントは最初に50ピクセル下に配置され、opacity の値が 0 で非表示になっています。

.stat-card {
  /* ... */
  opacity: 0;
  transform: translateY(50px);

  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}

次に、別の要素（ここでは .dashboard）が .active になると、.stat-card コンポーネントが完全に表示され、ページ上の元の位置に移動します。

.dashboard.active .stat-card {
  opacity: 1;
  transform: translateY(0);
}

さらに、ユーザーがいずれかの .stat-card にホバーしたときに、負の値を使用して 8px だけわずかに上に移動させる「マイクロアニメーション」を追加することもできます：

.dashboard.active .stat-card:hover {
  transform: translateY(-8px);
}

Focused form field animation

フォームフィールドは通常、フォーカスを示すために青いボーダーを使用しますが、より興味深い方法もあります。MUI などの UI ライブラリでは、TextField コンポーネントのラベルは最初にプレースホルダーとして機能しますが、ユーザーがフィールドにフォーカスすると上部に移動してラベルの位置になります。

translateY() 関数を input 要素と label 要素に適用することで、同様のアニメーションを実装できます。

まず、label 要素を absolute 配置を使用して input 要素内にプレースホルダーとして配置します。

label {
  position: absolute;
  left: 15px;
  top: 15px;

  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

次に、ユーザーが input フィールドにフォーカスすると、label を 32px 上に移動させてラベルとして機能させます。

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-32px) scale(0.8);
  color: #6200ee;
  font-weight: bold;
}

ユーザーが input 要素からフォーカスを失うと、label の位置が元に戻ります。

It doesn’t affect other elements

translateY() 関数は他の transform 関数と同様に、ドキュメントフローに影響を与えません。代わりに、周囲の要素や新しい位置の要素を押し出すことなく、変換された要素を新しい位置に視覚的に移動させます。また、要素が元々占めていたスペースは、まるで移動していないかのようにレイアウトに予約されたままになります。

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateY(40px);
}

「Translated」要素を移動させても、周囲の他の要素の配置に影響を与えないことに注意してください。

margin がリフローを引き起こしたり隣接する要素を移動させたりするのとは異なり、translateY() は要素が視覚的にレンダリングされる位置のみを変更します。

Issues with pointer pseudo-classes

translateY() を :hover のようなポインター疑似クラスに直接使用すると、インタラクションが壊れる場合があります。要素が大きく移動してカーソルから離れると、:hover 状態が失われ、要素が元の位置に即座に戻るスナップバックが発生します。初期位置ではカーソルがあるため、再度移動し、連続したちらつきループが発生します。

この問題の簡単な解決策は、移動させる要素を親コンテナ内に配置し、疑似クラス（:hover）を親要素に適用しつつ、メイン要素に translate 関数を適用することです。

/* Problem case */
.bad:hover {
  transform: translateY(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateY(160px);
}

Demo

Specification

CSS の translateY() 関数は、現在 Editor’s Drafts にある CSS Transforms Module Level 1 で定義されています。

Browser support

translateY() 関数は、すべてのモダンブラウザでベースラインサポートされています。

Read the original source