CSS translateY: Vertical Element Movement & Animation Guide

translateY()

25.06.2026 · 3 min read

Say you need to nudge an element vertically—up or down, by a specific distance. The CSS translateY() function does exactly that. It’s part of the transform property and is defined in the CSS...

Say you need to nudge an element vertically—up or down, by a specific distance. The CSS translateY() function does exactly that. It’s part of the transform property and is defined in the CSS Transforms Module Level 1 draft.

How it works

The syntax is straightforward:

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

That’s just a formal way of saying: move this element vertically by this amount.

Arguments

<length>: Positive values (like 80px) shift the element down; negative values (like -24ch) shift it up.
<percentage>: Relative to the element’s own height. So translateY(50%) on a 100px-tall box moves it 50px down; translateY(-100%) moves it 100px up.

Why use it in production?

Unlike margin-top or top, translateY() doesn’t trigger reflows or affect other elements’ positions. The original space remains reserved in the layout. This makes it ideal for animations and hover effects on dashboards, stat cards, or form fields—especially in single-page apps or e‑commerce checkout flows.

Practical example: sliding stat cards

Imagine a dashboard (.dashboard) with several stat cards that should slide up when the user scrolls or clicks. Start by displacing them 50px down and hiding them:

.stat-card {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}

When .dashboard.active is triggered, they become visible and slide into their natural position:

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

On hover, give a micro-animation by moving the card up 8px:

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

Focused form field animation

UI libraries like MUI use a similar technique for floating labels. The label sits inside the input as a placeholder (absolutely positioned), then translateY(-32px) moves it up when the user focuses or types:

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

Watch out for hover flickering

If you apply translateY() directly on :hover and the element moves far from the cursor, it loses the hover state and snaps back—causing a flicker loop. Fix it by wrapping the element in a parent and applying the pseudo-class there:

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

Local considerations for Cyprus / EU businesses

When building multilingual sites (EN, RU, EL), remember that translateY() works identically across all browsers and language versions—no need for language-specific overrides. It’s lightweight and doesn’t depend on external libraries, which helps with GDPR compliance (fewer third-party dependencies). For e‑commerce apps, smooth micro-interactions (like card hover or form labels) directly improve perceived performance and conversion rates.

Demo

Check the embedded CodePen to see translateY() in action with stat cards, form fields, and the hover-flicker fix.

62px