translateY()

The CSS translateY() function shifts an element vertically by the specified amount. Specifically, it shifts an element either up or down, depending on whether the value is positive or negative.

.parent:hover .box {
  transform: translateY(50%); /* Shift down by half the element's height */
}
CodePen Embed Fallback

Along with other transform functions, it is used inside the transform property.

It is defined in the CSS Transforms Module Level 1 draft.

Syntax

The translateY() function’s syntax looks like this:

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

Just a fancy way of saying: Translate (or move) the element vertically by this much.

Arguments

/* <length> */
translateY(80px) /* Element moves 80px down*/
translateY(-24ch) /* Element moves 24ch up */

/* <percentage> */
translateY(50%) /* Element moves 50% of the element's height downward */
translateY(-100%) /* Element moves 100% of the element's height upward */

The translateX() function takes a single <length-percentage> argument that specifies how far to move the element and in which direction, which can be either up (negative) or down (positive).

It can take either a <length> or a <percentage> argument:

  • <length>: When it’s positive, e.g. 20px, it pushes the element 20 pixels down, while negative values like -20px will push the element 20 pixels up.
  • <percentage>: Percentages are relative to the element’s height, so translateY(40%) on a 100px-tall element pushes the element 40px down, while translateY(-40%) pushes the element 40px up.

Basic usage

The translate functions are ideal for simpler animations since they don’t disturb the document flow. Specifically, the translateY() function is great for “pop-up” or “fade-in” animations where the elements can slide from the bottom. Take for example, a card component (let’s call it .stat-card) that slides up when the user clicks a button or scrolls down.

The components are initially displaced 50 pixels downwards, hidden with an opacity value of 0.

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

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

Then, when another element (let’s call it .dashboard) becomes .active, the .stat-card components become fully visible and are translated into their original position on the page.

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

We can even add a “micro-animation” whenever the user hovers over any of the .stat-card by moving it slightly up by 8px, thanks to using a negative value:

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

Focused form field animation

Form fields usually use a blue border to indicate focus, but they can be more interesting. In UI libraries like MUI, the TextField component’s label initially serves as a placeholder, but when a user focuses on the field, it moves to the top and assumes the label’s position.

We can implement a similar animation by applying the translateY() function to the input and label elements.

To start, we initially place the label element within the input element as a placeholder using absolute positioning.

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);
}

Then, when the user focuses on the input field, the label is translated 32px up to serve as a label.

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

The label‘s position is restored when the user loses focus from the input element.

CodePen Embed Fallback

It doesn’t affect other elements

The translateY() function, like other transform functions, does not affect the document flow. Instead, it visually displaces the translated element to a new position without pushing the elements in its surroundings or the ones at the new position. Also, the space the element originally occupied remains reserved in the layout as if it hadn’t moved at all.

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

  transform: translateY(40px);
}

Notice how shifting the “Translated” element does not affect the placement of the other elements around it.

CodePen Embed Fallback

Unlike margin which can trigger reflows or shift neighboring elements, translateY() only changes where the element is visually rendered.

Issues with pointer pseudo-classes

Using translateY() directly on a pointer pseudo-classes like :hover can sometimes break interactions. In a situation where the element is translated far and it moves away from the cursor, the :hover state gets lost, causing the element to snap back immediately to its original position. At the initial position, the cursor is there, so it translates again, resulting in a continuous flickering loop.

A simple solution to this is to place the element to be translated in a parent container, and apply the pseudo-class (:hover) to the parent element, while the main element takes the translate function.

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

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

Demo

CodePen Embed Fallback

Specification

The CSS translateY() function is defined in the CSS Transforms Module Level 1, which is currently in Editor’s Drafts.

Browser support

The translateY() function has baseline support on all modern browsers.

translateY() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

This post first appeared on Read More

Related Posts