--- title: translateY() | daily.dev description: The CSS translateY() function moves an element vertically up or down without affecting document flow. It accepts length or percentage values, where positive... canonical: https://daily.dev/posts/translatey--3m9u1oajs twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: translateY() | daily.dev og:description: The CSS translateY() function moves an element vertically up or down without affecting document flow. It accepts length or percentage values, where positive... og:url: https://daily.dev/posts/translatey--3m9u1oajs og:image: https://api.daily.dev/og/posts/3m9u1oAJs.png og:image:alt: translateY() og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # translateY() **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 5 min read · 0 upvotes · 0 comments ## Summary The CSS translateY() function moves an element vertically up or down without affecting document flow. It accepts length or percentage values, where positive values shift down and negative values shift up. Percentages are relative to the element's own height. Common use cases include slide-in animations, floating card hover effects, and animated form field labels (like MUI's TextField). A key gotcha: applying translateY() directly on :hover can cause flickering if the element moves away from the cursor — the fix is to apply :hover on a parent wrapper instead. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [translate\(\)](https://daily.dev/posts/translate--jgrc3wuih) · CSS-Tricks · 5 upvotes · 2 comments - [translateX\(\)](https://daily.dev/posts/translatex--2gqlsumly) · CSS-Tricks · 0 upvotes · 0 comments - [translateZ\(\)](https://daily.dev/posts/translatez--lzse02fme) · CSS-Tricks · 0 upvotes · 0 comments - [CSS-Tricks](https://daily.dev/posts/css-tricks-lqzt6cw70) · CSS-Tricks · 6 upvotes · 0 comments - [Level up CSS transitions with cubic-bezier](https://daily.dev/posts/level-up-css-transitions-with-cubic-bezier-gzpgsdnvg) · RUBYLAND · 5 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/translatey--3m9u1oajs) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"translateY()","url":"https://daily.dev/posts/translatey--3m9u1oajs","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/translatey--3m9u1oajs"},"datePublished":"2026-06-25T13:22:45.744Z","dateModified":"2026-06-25T13:23:25.730Z","description":"The CSS translateY() function moves an element vertically up or down without affecting document flow. It accepts length or percentage values, where positive...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/12/css-tricks-logo-gradient-outline.png","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/12/css-tricks-logo-gradient-outline.png","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/translatey--3m9u1oajs","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"translateY()"}]} ```