translateY() | CSS-Methods

The CSS translateY() perform shifts a component vertically by the desired quantity. Particularly, it shifts a component both up or down, relying on whether or not the worth is optimistic or unfavourable.

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

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

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

Syntax

The translateY() perform’s syntax seems like this:

 = translateY(  )

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

Arguments

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

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

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

It could possibly take both a  or a  argument:

• : When it’s optimistic, e.g. 20px, it pushes the factor 20 pixels down, whereas unfavourable 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 features are perfect for easier animations since they don’t disturb the doc circulate. Particularly, the translateY() perform is nice for “pop-up” or “fade-in” animations the place the weather can slide from the underside. Take for instance, a card part (let’s name it .stat-card) that slides up when the person clicks a button or scrolls down.

The elements 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 .energetic, the .stat-card elements turn into totally seen and are translated into their unique place on the web page.

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

We are able to even add a “micro-animation” at any time when the person hovers over any of the .stat-card by shifting it barely up by 8px, due to utilizing a unfavourable worth:

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

Centered type area animation

Kind fields normally use a blue border to point focus, however they are often extra attention-grabbing. In UI libraries like MUI, the TextField part’s label initially serves as a placeholder, however when a person 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() perform to the enter and label components.

To begin, we initially place the label factor inside 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 person 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 person loses focus from the enter factor.

It doesn’t have an effect on different components

The translateY() perform, like different remodel features, 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 area 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 location of the opposite components round it.

Not like margin which may set off reflows or shift neighboring components, translateY() solely adjustments 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 unique 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 dad or mum container, and apply the pseudo-class (:hover) to the dad or mum factor, whereas the primary factor takes the translate perform.

/* Downside case */
.dangerous:hover {
  remodel: translateY(160px);
}

/* Resolution */
.dad or mum:hover .good {
  remodel: translateY(160px);
}

Demo

Specification

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

Browser help

The translateY() perform has baseline help on all fashionable browsers.

Associated