translateY() | CSS-Tips

The CSS translateY() operate shifts a component vertically by the required quantity. Particularly, it shifts a component both up or down, relying on whether or not the worth is constructive or adverse.

.father or mother:hover .field {
  remodel: translateY(50%); /* Shift down by half the factor's top */
}

Together with different remodel capabilities, it’s used contained in the remodel property.

It’s outlined within the CSS Transforms Module Stage 1 draft.

Syntax

The translateY() operate’s syntax appears to be like like this:

 = translateY(  )

Only a fancy means of claiming: Translate (or transfer) the factor vertically by this a lot.

Arguments

/*  */
translateY(80px) /* Component strikes 80px down*/
translateY(-24ch) /* Component strikes 24ch up */

/*  */
translateY(50%) /* Component strikes 50% of the factor's top downward */
translateY(-100%) /* Component strikes 100% of the factor's top upward */

The translateX() operate takes a single  argument that specifies how far to maneuver the factor and during which route, which might be both up (adverse) or down (constructive).

It might take both a  or a  argument:

• : When it’s constructive, e.g. 20px, it pushes the factor 20 pixels down, whereas adverse values like -20px will push the factor 20 pixels up.
• : Percentages are relative to the factor’s top, so translateY(40%) on a 100px-tall factor pushes the factor 40px down, whereas translateY(-40%) pushes the factor 40px up.

Primary utilization

The translate capabilities are perfect for easier animations since they don’t disturb the doc circulate. Particularly, the translateY() operate is nice for “pop-up” or “fade-in” animations the place the weather can slide from the underside. Take for instance, a card element (let’s name it .stat-card) that slides up when the consumer clicks a button or scrolls down.

The parts are initially displaced 50 pixels downwards, hidden with an opacity worth of 0.

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

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

Then, when one other factor (let’s name it .dashboard) turns into .lively, the .stat-card parts turn into absolutely seen and are translated into their authentic place on the web page.

.dashboard.lively .stat-card {
  opacity: 1;
  remodel: translateY(0);
}

We are able to even add a “micro-animation” every time the consumer hovers over any of the .stat-card by transferring it barely up by 8px, because of utilizing a adverse worth:

.dashboard.lively .stat-card:hover {
  remodel: translateY(-8px);
}

Centered type area animation

Type fields often use a blue border to point focus, however they are often extra attention-grabbing. In UI libraries like MUI, the TextField element’s label initially serves as a placeholder, however when a consumer focuses on the sector, it strikes to the highest and assumes the label’s place.

We are able to implement an analogous animation by making use of the translateY() operate to the enter and label parts.

To begin, we initially place the label factor throughout the enter factor as a placeholder utilizing absolute positioning.

label {
  place: absolute;
  left: 15px;
  prime: 15px;

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

Then, when the consumer focuses on the enter area, the label is translated 32px as much as function a label.

enter:focus ~ label,
enter:not(:placeholder-shown) ~ label {
  remodel: translateY(-32px) scale(0.8);
  shade: #6200ee;
  font-weight: daring;
}

The label‘s place is restored when the consumer loses focus from the enter factor.

It doesn’t have an effect on different parts

The translateY() operate, like different remodel capabilities, doesn’t have an effect on the doc circulate. As a substitute, it visually displaces the translated factor to a brand new place with out pushing the weather in its environment or those on the new place. Additionally, the house the factor initially occupied stays reserved within the format as if it hadn’t moved in any respect.

/* Translated factor */
.translated {
  place: absolute;
  prime: 0;
  left: 0;

  remodel: translateY(40px);
}

Discover how shifting the “Translated” factor doesn’t have an effect on the position of the opposite parts round it.

In contrast to margin which might set off reflows or shift neighboring parts, translateY() solely modifications the place the factor is visually rendered.

Points with pointer pseudo-classes

Utilizing translateY() straight on a pointer pseudo-classes like :hover can generally break interactions. In a state of affairs the place the factor is translated far and it strikes away from the cursor, the :hover state will get misplaced, inflicting the factor to snap again instantly to its authentic place. On the preliminary place, the cursor is there, so it interprets once more, leading to a steady flickering loop.

A easy resolution to that is to put the factor to be translated in a father or mother container, and apply the pseudo-class (:hover) to the father or mother factor, whereas the principle factor takes the translate operate.

/* Drawback case */
.unhealthy:hover {
  remodel: translateY(160px);
}

/* Answer */
.father or mother:hover .good {
  remodel: translateY(160px);
}

Demo

Specification

The CSS translateY() operate is outlined within the CSS Transforms Module Stage 1, which is presently in Editor’s Drafts.

Browser assist

The translateY() operate has baseline assist on all trendy browsers.

Associated