CSS-TRICKS

<p>We recently got the <code>shape()</code> function and <code>corner-shape</code> property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the <code>border-shape</code> property!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/">Get Ready For the Powerful CSS border-shape Property!</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


So, we recently got the new shape() function (now Baseline!) as well as the corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
shape()? corner-shape? border-shape?! Where did all these come from?
If you are not a CSS shape fanatic like me, you probably missed these features when they came out, so let’s give them brief, formal introductions, starting with…




shape() and corner-shape
The shape() function is a new value for clip-path and offset-path that uses SVG syntax to create CSS shapes much more easily than, say, path(). I wrote a four-article series exploring this feature, and another article where I explore the creation of complex shapes.




Speaking about SVG, you can express any SVG shape using shape(). Said differently, you can convert any SVG shape into a CSS shape and, guess what, I made a converter that does exactly that!
As far as corner-shape goes, it’s a property that works in conjunction with border-radius. As its name suggests, it allows you to control the shape of an element’s corner using predefined keywords.
.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
}




It can also be used to create common CSS shapes, like I get into in another article, “CSS Shapes using corner-shape.”




But is this the corner-shape property really useful or even needed? Except for the squircle value, most of the shapes can already be created using clip-path or mask. But what corner-shape does that these others can’t is easily add borders and other decorations to those shapes!




corner-shape will not only shape the corners, but it also supports other properties like border and box-shadow, allowing them to follow the shape rather than the element’s box. This is a game-changer because we all know that adding borders to shapes is a nightmare.
Support is still not great (Chromium-only as I’m writing this), but it’s a good time to explore it and get an overview of its potential.




Enter border-shape!
Shaping corners is good, but it’s still fairly limited as far as what we can do with it. Like, what about shaping the whole element instead? That’s what border-shape will do. It accepts the same values as clip-path, including the new shape() function.
So, it has the same job as clip-path? What’s new?
Like with corner-shape, most decorative properties such as border, box-shadow, and outline follow the shape.




clip-path (and mask) will clip/mask the whole element, including the decorations, so having borders is a big NO. That’s a major problem for creating CSS shapes.
The border-shape property is here to solve this issue. Instead of clipping the element, it “shapes” the element, allowing its decorations to follow that shape. In other words, putting borders on CSS shapes will become child’s play!
Not to mention that border-shape is also very easy to use. If you are familiar with clip-path, then you practically have nothing new to learn. Simply replace one property with another, and you are done.
.shape {
  /* Old code */
  clip-path: shape() | polygon() | ...;

  /* New code */
  border-shape: shape() | polygon() | ...;
}
I invite you again to learn more about the shape() function because it’s the value that makes border-shape really powerful. The two really go hand-in-hand.
Now that you know the basic use of the property, shall we start the fun stuff? I are here to push the limits and show you what is possible using border-shape.
Note: Support is limited to Chrome-only for now so check out the next demos using Chrome.




Border-Only Shapes
As I said, the first major advantage here is adding borders to shapes that follow the actual shape, which also means the ability to create border-only shapes. All you have to do is write the following code:
.shape {
  border: 8px solid red;
  border-shape: /* your shape code */;
}
No more hacks and no more headaches!
CodePen Embed Fallback




Most of the shapes are already available in my CSS Shapes collection, so really, making border-only shapes is something you can do with a simple copy/paste. Even some of my online generators are already configured to provide border-only versions of complex shapes, like blobs, wavy lines, and fancy frames, among many, many others.




Cutout Shapes
Let’s take the previous code and update it as follows:
.shape {
  border: 8px solid red;
  border-shape: inset(0) /* you shape code */;
}
You keep the shape code you had, and you add inset(0) at the beginning. Yes, you can have two shape values inside border-shape and the result will be as follows:
CodePen Embed Fallback




From the specification:
The border-shape property accepts either a single <basic-shape> or two <basic-shape>s:
Single <basic-shape> (Stroke mode): The border is rendered as a stroke along the shape’s path, with the stroke width determined by the relevant side’s computed border width. This mode is useful for creating outlined shapes.
Two <basic-shape>s (Fill mode) The border is rendered as the area between the two paths. The first shape defines the outer boundary, and the second shape defines the inner boundary. This mode provides precise control over the border region’s geometry.
Using a basic rectangle as the outer shape (inset(0)), I was able to easily transform the border-only version into a cutout version!
Do you want the shape inside a circle? Easy!
CodePen Embed Fallback




All I did is replace inset(0) (a rectangle) with circle() (a circle).
But we can do this with a simple border-radius: 50%, right?
No! When working with border-shape, the border-radius is ignored, which is kind of logical since we no longer have corners to round — the element is now shaped. This is not a big deal since we can literally create any kind of shape that replaces the use of border-radius, as shown in the previous example.
Note: If you are wondering why I am using circle()without any argument, check out my article “CSS Functions that work without arguments.”
Here are a few more examples with the two shapes value to look at before we move to the next part:
CodePen Embed Fallback




You can literally use any combination to get complex-looking shapes without a bunch of effort!
Breakout Decorations
Now let’s take a block of text and apply the previous code with the two shape values:
.box {
  border-shape: inset(0) circle();
  border-color: pink;
}
CodePen Embed Fallback
Perhaps this is nothing surprising considering what we have learned so far. We define two shapes and the border is drawn inside the area between them. What’s new here is that we are dealing with content and, as you can see, it overlaps the border.
border-shape shapes the whole element, including the element’s decoration, but any content inside remains unchanged and follows the initial rectangle shape. That’s not new behavior since the same happens even even with classic border-radius. And the content will overflow unless we decide to hide it using overflow hidden.
CodePen Embed Fallback
In this case, I won’t consider the overflow property as I want the content to overflow and be placed on top of the border decoration.
Now let’s update the code of the shape like this:
.box {
  border-shape: inset(0 -100px) circle(50px);
  border-color: pink;
}
CodePen Embed Fallback
I made the circle smaller and the rectangle bigger. Do you see where I am going? By making the radius of the circle 0 and the rectangle bigger, I create a breakout background effect!
.box {
  border-shape: inset(0 -100vw) circle(0);
  border-color: pink;
}
CodePen Embed Fallback




The element remains centered, but its background (that we are simulating using a border!) extends to the edge of the screen.
And this is not limited to using two shape values. Even with the one shape value, we can achieve a breakout decoration (which is typically difficult) if you consider any value that gets you out of the element’s boundary.
Here is a demo with many examples that I’ll let you explore:
CodePen Embed Fallback




Partial Decorations
Let’s piggy-back off that last demo to try different decorations.
CodePen Embed Fallback




This time, instead of extending outside the element boundary, I am staying within it to create partial decoration. In other words, we no longer have boundaries. border-shape has no limit. The only limit is your imagination!
I am mainly relying on the shape() function to create the decoration, so do yourself a favor and explore this feature by reading my four-article series! If you master shape(), you can easily produce complex decorations using border-shape.
Shape Animation
Yes, border-shape can be animated, and we can have different kinds of animations. With the two-value syntax, we can animate the border-width value to create a reveal effect:
Hover the below and see the result:
CodePen Embed Fallback
Cool, right? We can also apply this to image elements as well:
CodePen Embed Fallback
We can also animate the shape values to create more complex animations. Here is a demo of a bouncing hover effect applied to blob shapes (from my article “Making Complex CSS Shapes Using shape().”
CodePen Embed Fallback
I take the same code, replace clip-path with border-shape, and tada!
CodePen Embed Fallback
And why not add a subtle animation to those previous decorations? Hover the titles and the text to see what happens:
CodePen Embed Fallback
Want More? Let’s Go!
Here is a hand-drawn underline that slides between the menu items on hover. Straight lines are boring!
CodePen Embed Fallback
And why not an electric frame around your content? Don’t worry, it’s safe for touch screens.
CodePen Embed Fallback
What about a fancy border-only loader? (code taken from my squishy loader collection)
CodePen Embed Fallback
Let’s connect circles with a straight line that bends when the circles get closer and stretches when they get farther. Drag the circles in the demo below and see the magic in play:
CodePen Embed Fallback
Conclusion
I think it’s clear now why I am calling this new property “powerful.” In addition to making it easy to create CSS shapes, it lets us add fancy decorations, cool animations, and more!
I didn’t go into fine detail with most of the demos as I wanted to keep this a light article showing the potential of border-shape. Now that you know we can create crazy stuff with it, stay tuned for more elaborate articles!
Don’t forget to bookmark my CSS Shapes collection and my online generators. I have already updated many of the shapes using shape(), and I am in the process of also including the border-shape version.
Get Ready For the Powerful CSS border-shape Property! originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
Get Ready For the Powerful CSS border-shape Property! originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Get Ready For the Powerful CSS border-shape Property!

<p>I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, this isn’t one to miss!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-14/">What’s !important #14: Gap Decorations, random(), &lt;select&gt; field sizing, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">I know you’re busy, so for <strong>What’s !important #14</strong>, I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, this isn’t one to miss!</p>



<span id="more-395894"></span>



<h2 id="hyperblam-make-music-with-html" class="wp-block-heading">Hyperblam: Make music with HTML</h2>



<p class="wp-block-paragraph">Heydon Pickering created <a href="https://hyperblam.how/" rel="noopener">Hyperblam</a>, a HTML-driven implementation of the Web Audio API that uses Web Components to create music without JavaScript.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="642" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-1.png?resize=1024%2C642&#038;ssl=1" alt="A website screenshot for Hyperblam featuring a black background with a stylized white logo above navigation links, large hand-drawn text reading WRITE MUSIC NOT JAVASCRIPT, followed by a brief introductory sentence explaining that Hyperblam lets users make music with HTML." class="wp-image-395896" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-1-scaled.png?resize=1024%2C642&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-1-scaled.png?resize=300%2C188&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-1-scaled.png?resize=768%2C482&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-1-scaled.png?resize=1536%2C963&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-1-scaled.png?resize=2048%2C1285&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p class="wp-block-paragraph">Okay, not very CSS-y, but still pretty cool!</p>



<h2 id="css-quake" class="wp-block-heading">CSS Quake</h2>



<p class="wp-block-paragraph">Powered by <a href="https://polycss.com/" rel="noopener">PolyCSS</a>, Layoutit created <a href="https://cssquake.com/" rel="noopener">CSS Quake</a>, a port of the groundbreaking 1996 game, Quake.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="642" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2.png?resize=1024%2C642&#038;ssl=1" alt="A screenshot of the first playable moment of Quake." class="wp-image-395897" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2-scaled.png?resize=1024%2C642&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2-scaled.png?resize=300%2C188&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2-scaled.png?resize=768%2C482&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2-scaled.png?resize=1536%2C963&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2-scaled.png?resize=2048%2C1284&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p class="wp-block-paragraph"><em>Very</em> CSS-y, and a perfect companion to <a href="https://css-tricks.com/whats-important-7/#doom-in-css">CSS DOOM</a>, which also shipped recently.</p>



<h2 id="a-headfirst-dive-into-css-gap-decorations" class="wp-block-heading">A head-first dive into CSS Gap Decorations</h2>



<p class="wp-block-paragraph"><a href="https://css-tricks.com/author/afiftemani/">Temani Afif</a> showed us <a href="https://master.dev/blog/lets-play-with-gap-decorations/" rel="noopener">how to style gap decorations</a>. As you might’ve guessed, ‘gaps’ are the spaces that <code>gap</code>s take up when using flexbox, grid layout, or multi-column layout. To be honest, gap decorations have been a long time coming, but as Temani demonstrated, there’s actually a lot that we can do with them.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_xbggQgj/f8fd92ac42f4d00a63df914c70439a39" src="//codepen.io/anon/embed/xbggQgj/f8fd92ac42f4d00a63df914c70439a39?height=450&amp;theme-id=1&amp;slug-hash=xbggQgj/f8fd92ac42f4d00a63df914c70439a39&amp;default-tab=css,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed xbggQgj/f8fd92ac42f4d00a63df914c70439a39" title="CodePen Embed xbggQgj/f8fd92ac42f4d00a63df914c70439a39" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="css-random-experiments" class="wp-block-heading">CSS <code>random()</code> experiments</h2>



<p class="wp-block-paragraph">Polypane demonstrated their <a href="https://polypane.app/blog/experimenting-with-random-in-css/" rel="noopener">CSS <code>random()</code> experiments</a>. If you’ve been wondering about this elusive CSS function, which still isn’t supported by any browser but Safari, Polypane has created a bokeh effect, some falling petals, an untidy stack of polaroids, a poem, an animated aurora, and more. It’s a pretty deep dive that seemingly shows us everything that we can do with <code>random()</code>.</p>



<figure class="wp-block-video"><video height="974" style="aspect-ratio: 2314 / 974;" width="2314" controls src="https://css-tricks.com/wp-content/uploads/2026/06/3.mp4"></video><figcaption class="wp-element-caption">Source: <a href="https://polypane.app/blog/experimenting-with-random-in-css/" rel="noopener">Polypane</a>.</figcaption></figure>



<h2 id="how-to-make-ltselectgts-fluid" class="wp-block-heading">How to make <code>&lt;select&gt;</code>s fluid</h2>



<p class="wp-block-paragraph">Manuel Matuzović showed us <a href="https://matuzo.at/blog/2026/select-fieldsize" rel="noopener">how to set the width of <code>&lt;select&gt;</code>s to the width of their selected <code>&lt;option&gt;</code> with <code>field-sizing</code></a> (<code>field-sizing: content</code>, to be more specific), which became Baseline when Firefox 152 shipped it a fortnight ago.</p>



<p class="wp-block-paragraph">Another thing to note is that if we use the <code>size</code> attribute (e.g., <code>&lt;select size="3"&gt;</code>), which turns the <code>&lt;select&gt;</code> into a scrollable list box showing three <code>&lt;option&gt;</code>s by default, <code>field-sizing: content</code> overrides that to show all <code>&lt;option&gt;</code>s.</p>



<h2 id="the-new-standard-for-css-theming" class="wp-block-heading">The new standard for CSS theming</h2>



<p class="wp-block-paragraph">Una Kravets explained <a href="https://una.im/modern-css-theming" rel="noopener">how modern CSS theming works</a>. We’ve seen a whole lot of this lately, but Una talks about <code><a href="https://css-tricks.com/almanac/rules/p/property/">@property</a></code>, <code><a href="https://css-tricks.com/almanac/functions/l/light-dark/">light-dark()</a></code>, <code><a href="https://css-tricks.com/almanac/functions/c/contrast-color/">contrast-color()</a></code>, <em>and</em> <code>@container style()</code>, all of which are also Baseline as of recently, so this is a great opportunity to see how all of these features work together.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_MYJeKdb" src="//codepen.io/anon/embed/MYJeKdb?height=450&amp;theme-id=1&amp;slug-hash=MYJeKdb&amp;default-tab=css,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed MYJeKdb" title="CodePen Embed MYJeKdb" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Speaking of which, <a href="https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/">I wrote up a thing about <code>contrast-color()</code></a> after exploring it for the first time.</p>



<h2 id="why-websites-dont-need-to-work-the-same-way-for-everybody" class="wp-block-heading">Why websites don’t need to work the same way for everybody</h2>



<p class="wp-block-paragraph">Bramus explained <a href="https://www.bram.us/2026/06/21/do-websites-need-to-function-exactly-the-same-on-every-platform/" rel="noopener">why websites don’t need to work the same way for everybody</a>. For example, different platforms have different primary input modalities, and even then, users might have a secondary one hooked up that they prefer, which is why we need to abandon the idea of making websites identical across platforms.</p>



<p class="wp-block-paragraph">He also talks about three incredibly interesting web platform features — interest invokers, overscroll actions, and the Document Picture-in-Picture API — that must function differently depending on the platform.</p>



<h2 id="marina-aisa-at-web-engines-hackfest" class="wp-block-heading">Marina Aísa at Web Engines Hackfest</h2>



<p class="wp-block-paragraph">While everybody was still talking about CSS Day (<a href="https://css-tricks.com/whats-important-13/#what-happened-at-css-day-2026">including me</a>), <a href="https://webengineshackfest.org/" rel="noopener">Web Engines Hackfest</a> was kicking off in A Coruña, Galicia. What I love about these events (besides the talks, of course) is attendees talking about the talks, the people that they met, what else they did while they was in town, and so on.</p>



<p class="wp-block-paragraph">Here’s <a href="https://bsky.app/profile/marinaaisa.com/post/3moifdog32k23" rel="noopener">Marina Aísa documenting the two-day event</a>, starting off with a hike in a Galician forest, then two days of talks about web engines and web standards (interspersed with some wall climbing), then finally some discussion about what browsers can do to help improve web accessibility:</p>



<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:tpem4cjgzwlpu5cvevvcsfwn/app.bsky.feed.post/3mofvqz72g22m" data-bluesky-cid="bafyreibt25wi4idfxr5fruxvla4tll4wybmhz2fjtkpivev2viijhybl64" data-bluesky-embed-color-mode="system"><p lang="en">This week I&#x27;m in A Coruña, Galicia, attending the @webengineshackfest.org &#x1f469;&#x200d;&#x1f4bb; where we are discussing the future of web engines and standards.

Given the potential impact on future web development, I thought it would be helpful to share some of my personal notes from the event. &#x270d;&#xfe0f;&#x1f447;</p>&mdash; Marina Aísa (<a href="https://bsky.app/profile/did:plc:tpem4cjgzwlpu5cvevvcsfwn?ref_src=embed" rel="noopener">@marinaaisa.com</a>) <a href="https://bsky.app/profile/did:plc:tpem4cjgzwlpu5cvevvcsfwn/post/3mofvqz72g22m?ref_src=embed" rel="noopener">14:31 · Jun 16, 2026</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>



<p class="wp-block-paragraph">Personal goal for next year: to attend one of these events!</p>



<h2 id="new-web-platform-features" class="wp-block-heading">New web platform feature<del>s</del></h2>



<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152" rel="noopener">Firefox 152</a>
<ul class="wp-block-list">
<li><a href="https://css-tricks.com/almanac/properties/f/field-sizing/"><code>field-sizing</code></a> (now Baseline)</li>
</ul>
</li>
</ul>



<p class="wp-block-paragraph">Yes, it’s been a dull couple of weeks for stable browsers, but there are some really exciting things coming up. Keep your eyes on our <a href="https://css-tricks.com/category/quick-hits/">Quick Hits</a>, because that’s where I share these web platform updates first (plus those from developmental browsers). In fact, Chrome 150 will be shipping later today.</p>



<p class="wp-block-paragraph">See ya’ll in two weeks!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-14/">What’s !important #14: Gap Decorations, random(), &lt;select&gt; field sizing, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, this isn’t one to miss!




Hyperblam: Make music with HTML
Heydon Pickering created Hyperblam, a HTML-driven implementation of the Web Audio API that uses Web Components to create music without JavaScript.




Okay, not very CSS-y, but still pretty cool!
CSS Quake
Powered by PolyCSS, Layoutit created CSS Quake, a port of the groundbreaking 1996 game, Quake.




Very CSS-y, and a perfect companion to CSS DOOM, which also shipped recently.
A head-first dive into CSS Gap Decorations
Temani Afif showed us how to style gap decorations. As you might’ve guessed, ‘gaps’ are the spaces that gaps take up when using flexbox, grid layout, or multi-column layout. To be honest, gap decorations have been a long time coming, but as Temani demonstrated, there’s actually a lot that we can do with them.
CodePen Embed Fallback
CSS random() experiments
Polypane demonstrated their CSS random() experiments. If you’ve been wondering about this elusive CSS function, which still isn’t supported by any browser but Safari, Polypane has created a bokeh effect, some falling petals, an untidy stack of polaroids, a poem, an animated aurora, and more. It’s a pretty deep dive that seemingly shows us everything that we can do with random().
Source: Polypane.



How to make <select>s fluid
Manuel Matuzović showed us how to set the width of <select>s to the width of their selected <option> with field-sizing (field-sizing: content, to be more specific), which became Baseline when Firefox 152 shipped it a fortnight ago.
Another thing to note is that if we use the size attribute (e.g., <select size="3">), which turns the <select> into a scrollable list box showing three <option>s by default, field-sizing: content overrides that to show all <option>s.
The new standard for CSS theming
Una Kravets explained how modern CSS theming works. We’ve seen a whole lot of this lately, but Una talks about @property, light-dark(), contrast-color(), and @container style(), all of which are also Baseline as of recently, so this is a great opportunity to see how all of these features work together.
CodePen Embed Fallback
Speaking of which, I wrote up a thing about contrast-color() after exploring it for the first time.
Why websites don’t need to work the same way for everybody
Bramus explained why websites don’t need to work the same way for everybody. For example, different platforms have different primary input modalities, and even then, users might have a secondary one hooked up that they prefer, which is why we need to abandon the idea of making websites identical across platforms.
He also talks about three incredibly interesting web platform features — interest invokers, overscroll actions, and the Document Picture-in-Picture API — that must function differently depending on the platform.
Marina Aísa at Web Engines Hackfest
While everybody was still talking about CSS Day (including me), Web Engines Hackfest was kicking off in A Coruña, Galicia. What I love about these events (besides the talks, of course) is attendees talking about the talks, the people that they met, what else they did while they was in town, and so on.
Here’s Marina Aísa documenting the two-day event, starting off with a hike in a Galician forest, then two days of talks about web engines and web standards (interspersed with some wall climbing), then finally some discussion about what browsers can do to help improve web accessibility:
This week I'm in A Coruña, Galicia, attending the @webengineshackfest.org 👩‍💻 where we are discussing the future of web engines and standards.

Given the potential impact on future web development, I thought it would be helpful to share some of my personal notes from the event. ✍️👇
— Marina Aísa (@marinaaisa.com) 14:31 · Jun 16, 2026




Personal goal for next year: to attend one of these events!
New web platform features
Firefox 152

field-sizing (now Baseline)
Yes, it’s been a dull couple of weeks for stable browsers, but there are some really exciting things coming up. Keep your eyes on our Quick Hits, because that’s where I share these web platform updates first (plus those from developmental browsers). In fact, Chrome 150 will be shipping later today.
See ya’ll in two weeks!
What’s !important #14: Gap Decorations, random(), <select> field sizing, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

I know you’re busy, so for What’s !important #14, I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. From CSS Quake to CSS Gap Decorations, this isn’t one to miss!
What’s !important #14: Gap Decorations, random(), <select> field sizing, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

What’s !important #14: Gap Decorations, random(), <select> field sizing, and More

<p>CSS has always had pseudo-classes that style things based on user interactions. Recent features, however, are blurring the line between what CSS "listens" for and how they are alternatives to what Javascript typically listens for.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-states-and-javascript-events/">The Shifting Line Between CSS States and JavaScript Events</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


CSS is listening to us. No, not like that. Rather, CSS is accumulating more and more pseudo-classes to help us respond to JavaScript events so that we don’t have to do so with JavaScript itself. But while pseudo-classes track states, not events, they sure can feel like event listeners sometimes (not that it really matters in the context of CSS).
Then again, what is CSS these days? For example, there’s a proposal for event-trigger in the Animation Triggers spec, which would basically listen for events and trigger animations. If you ask me though, the syntax is capable of a lot more than that (think: invoker commands but for CSS).
But to stay in today’s reality, I’ll walk you through the different CSS pseudo-classes out there that are kind of like event listeners, before doing the same for event-trigger, where I’ll show you how (I think) this currently unsupported feature would work.




“Event listening” pseudo-classes
:hover and :active
The :hover state captures the moment from when the pointerenter event fires to when the pointerleave event fires, which perfectly illustrates why pseudo-classes are states, not events.
:active matches the target (e.g., a link or button) that’s currently being pressed with a mouse, finger, or stylus, which makes it akin to pointerdown and pointerup/pointercancel.
By the way, the pointer-events: none CSS declaration prevents pointer events from firing on the selected element!
:focus and :focus-visible
The :focus pseudo-class is akin to the focus and blur (unfocus) JavaScript events, but :focus-visible is a bit more complex. :focus-visible triggers when :focus does, but in addition, the browser uses a variety of heuristics to determine whether or not a focus indicator should be shown. Is the user operating with a keyboard? Is the element a form control? This really makes me appreciate what CSS offers. In fact, the best way to handle this using JavaScript is to query the CSS pseudo-class:
element.addEventListener("focus", (event) => {
  if (event.target.matches(":focus-visible")) {
    /* Do something */
  }
});
:focus-within (and :has())
JavaScript excels at the “if A is Y, then do Z to B” kind of stuff. We can traverse the DOM, leverage event propagation, and much more. In that regard, CSS can feel a bit limited. However, CSS is evolving quickly. It has many new if-this-do-that features such as scroll-driven animations, and it’ll have more in the future. HTML is doing the same with dedicated components such as <details>, which all have accompanying CSS features.
I’ll mention some of that later, actually. In a more holistic sense, what we have is :focus-within, which matches if a child has focus, and :has(), which accepts any valid selector and matches if such a relationship exists between the two selectors.
For example, these two selectors do the exact same thing:
form:focus-within {
  /* Style the form when something within has focus */
}

form:has(:focus) {
  /* Style the form when something within has focus */
}
:checked
It’s fairly obvious what :checked does. The JavaScript event that’s most synonymous with it is change, which fires when the value of an <input>, <select>, or <textarea> changes (although, in this context, the input event is quite similar).
To listen for a check, we’d do something like this:
checkbox.addEventListener("change", (event) => {
  if (event.target.checked) {
    /* Checked */
  } else {
    /* Not checked */
  }
});
CSS pseudo-classes often capture the moment between two JavaScript events (e.g., pointerenter and pointerleave), but when they’re not doing that, they’re handling logic instead, as above.
Let’s look at some more examples of hidden logic handling.
:valid/:invalid/:user-valid/:user-invalid/:autofill
We don’t need the :not() pseudo-class function here, as validity can be checked using both the :valid and :invalid pseudo-classes, but on the JavaScript side of things, there’s no valid event (only invalid). That being said, if using JavaScript, you’ll likely want to call the checkValidity() method (which actually fires the invalid event if it returns false) within the callback of the event listener for input, change, blur (to check validity when unfocusing from an element), or submit (to check validity of the entire form when submitting it, as below).
form.addEventListener("submit", () => {
  if (form.checkValidity()) {
    /* All form controls are valid */
  } else {
    /* A form control is invalid (the invalid event fires) */
  }
});
We can also do this with the ValidityState object, which doesn’t fire the invalid event, but does tell us why a form control is valid or invalid in the same way that HTML form validation does:
input.addEventListener("input", () => {
  if (input.validity.valid) {
    /* Input is valid */
  } else {
    /* Input is invalid (the invalid event doesn’t fire) */
  }
});
The thing about HTML form validation is that it takes care of the entire front end, but if there’s a non-default behavior that you need, checkValidity() or ValidityState is what you’re looking for.
The pseudo-classes will work either way. A little too well, in fact! An easy thing to miss is that form controls trigger either :valid or :invalid immediately. However, :user-valid and :user-invalid wait for users to supply a value and unfocus before triggering. This is actually what the change event does (unless the element is a checkbox, radio button, dropdown list, color picker, or range slider), and what makes it different from the input event.
There isn’t a JavaScript event for auto-filling or even a clean way to detect it using JavaScript, but there is an :autofill pseudo-class.
Media element pseudo-classes
Media element pseudo-classes are still new. They aren’t supported by Chrome yet and only landed in Firefox recently, but they are a part of Interop 2026 and soon we’ll be able to style <audio> and <video> elements based on their state without listening to JavaScript events. I’m sure you understand how this works by now, so here’s a quick rundown:

Pseudo-classJavaScript event equivalent

:bufferingwaiting
:mutedvolumechange (but see below)
:pausedpause
:playingplaying (not play)
:seekingseeking
:stalledstalled
:volume-lockedN/A, see below





Use the volumechange event to detect mute:
audio.addEventListener("volumechange", () => {
  if (audio.muted) {
    // Muted
  } else {
    // Not muted
  }
});
Detecting volume lock means trying to change the volume and checking for success. The best approach is to create an entirely new element so that we don’t trigger volumechange on the real one:
// Create video
const video = document.createElement("video");

// Change volume
video.volume = 0.5;

if (video.volume !== 0.5) {
  // Volume locked
} else {
  // Volume not locked
}
(Or to use the :volume-locked pseudo-class, if writing CSS.)
:popover-open / :open / :modal
As we might expect, there’s no JavaScript event for when a popover, <dialog>, or <details> opens or closes, but we can listen for the toggle event and then check the state:
element.addEventListener("toggle", () => {
  if (element.open) {
    /* Popover/dialog/details open */
  } else {
    /* Popover/dialog/details not open */
  }
});
However, CSS offers these pseudo-classes right out of the box:
:popover-open (for popovers)
:open (for <dialog> and <details> elements)
:modal (for modal <dialog>s and fullscreen elements)
Speaking of fullscreen elements…
:fullscreen
The :fullscreen pseudo-class is synonymous with the fullscreenchange JavaScript event with a conditional baked in:
document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement) {
    /* fullscreenElement is fullscreen */
  } else {
    /* Nothing is fullscreen (fullscreenElement is null) */
  }
});
:target
When a URL hash (e.g., #contact) matches an element’s ID (e.g., <div id="contact">), that element matches the :target pseudo-class. When using JavaScript, we have to listen for the hashchange event and then see if a matching element is found:
window.addEventListener("hashchange", () => {
  const target = document.getElementById(window.location.hash.substring(1));

  if (target) {
    /* Matching element found */
  } else {
    /* Matching element not found */
  }
});
Conclusion (but not really)
This isn’t a “JavaScript bad” rant but rather an appreciation for what CSS simplifies without forgetting the surgical control that JavaScript offers. More ways to do things is never a bad thing.
And on that note, I want to quickly mention event-trigger.
Actual event listeners (event-trigger)
I came across event triggers when Chrome implemented scroll-triggered animations, as they’re in the same module, but they’re not supported by any web browser yet, so if I make any mistakes, I apologize. Let’s dive in.
event-trigger-name will accept a simple dashed ident:
button {
  event-trigger-name: --event;
}
event-trigger-source will be the event listener, essentially.
It’ll accept the following keywords:
activate
interest
click
touch
dblclick
keypress(<string>)
button {
  event-trigger-source: click;
}
I believe the interest keyword refers to the upcoming Interest Invoker API whereas the activate keyword could depend on the element. For <details> for example, activation could mean when opened, but I’m not sure. Subsequent drafts of the spec should tell us more, and reveal more events.
Anyway, the events will trigger animations. First we’d create a @keyframes animation, then we’d attach it to the element to be animated, but the animation wouldn’t run until triggered by the event (whereas normally they’d run immediately).
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  animation: fade-in 300ms both;
}
Then we ensure that when the event fires, the animation triggers. We do this by setting animation-trigger alongside animation, referencing the dashed ident (--event). This has the optional benefit of allowing the event of one element to trigger the animation of another. Here’s a quick example, using the event-trigger shorthand this time:
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

button {    
  /* On click, trigger --event animation */
  event-trigger: --event click;
}

div {
  /* When --event fires, play animation forwards */
  animation-trigger: --event play-forwards;

  /* Animation */
  animation: fade-in 300ms both;
}
This is what’s called a stateless event trigger. Think about it — you can’t unclick a click, right? But we can lose interest, so here’s what a statefull event-triggered animation would look like (notice the syntax for two events separated by a / and two animation actions, one for each state):
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

button {    
  /* interest (entry) / interest (exit) */
  event-trigger: --event interest / interest;
}

div {
  /* Play forward with interest, backward when losing it */
  animation-trigger: --event play-forwards play-backwards;

  /* Animation */
  animation: fade-in 300ms both;
}
Acceptable animation actions include:
none
play
play-once
play-forwards
play-backwards
pause
reset
replay
There are many combinations of events and animation actions that wouldn’t work, but these would be easy to sidestep because it wouldn’t make sense to use them. We could, however, trigger multiple different animations because animation-trigger is a reset-only sub-property animation. Here’s a rough example:
animation-name: animationA, animationB;
animation-trigger: --eventA play, --eventB replay;
The possibilities are endless depending on how the W3C move forward with this feature (the spec mentions allowing for event bubbling!), but I kinda wish we could invoke JavaScript methods with event triggers like how HTML can with the Invoker Commands API.
What do you think? A step in the right direction, or does CSS need to stay in its lane?
The Shifting Line Between CSS States and JavaScript Events originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

CSS has always had pseudo-classes that style things based on user interactions. Recent features, however, are blurring the line between what CSS "listens" for and how they are alternatives to what Javascript typically listens for.
The Shifting Line Between CSS States and JavaScript Events originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

The Shifting Line Between CSS States and JavaScript Events

<p>The <code>translateZ()</code> function moves an element closer to or farther from the user. </p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translatez/">translateZ()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translateZ()</code>&nbsp;function adds depth to an element, drawing it closer or farther in space. In other words, it shifts an element along the Z-axis in a 3D space.</p>



<span id="more-394786"></span>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}</code></pre>



<p class="is-style-explanation wp-block-paragraph"><strong>Either the&nbsp;<code>perspective()</code>&nbsp;function or <code><a href="https://css-tricks.com/almanac/properties/p/perspective/">perspective</a></code> property is necessary for <code>translateZ()</code> to work.</strong> Without either one, there&#8217;s no effect.</p>



<p class="wp-block-paragraph">Activate the switch in the following demo, then hover over the box to see it appear closer:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_bNeyaWp" src="//codepen.io/anon/embed/bNeyaWp?height=450&amp;theme-id=1&amp;slug-hash=bNeyaWp&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed bNeyaWp" title="CodePen Embed bNeyaWp" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">While it looks like the&nbsp;<code>.box</code>&nbsp;element is getting bigger&#8221; on hover, that&#8217;s not what is happening. When you hover over the box, it actually moves <em>closer</em> to you a length of 100 pixels, making it appear larger. We&#8217;ll get more into that in just a bit so it&#8217;s more obvious what&#8217;s happening there.</p>



<p class="is-style-explanation wp-block-paragraph"><code>translateZ()</code>&nbsp;should not be mistaken for an alternative to the&nbsp;<code>scale()</code>&nbsp;function or <code><a href="https://css-tricks.com/almanac/properties/s/scale/">scale</a></code> property. Perspective and scale are two different concepts.</p>



<p class="wp-block-paragraph">The&nbsp;<code>translateZ()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-2/#funcdef-translatez" rel="noopener">CSS Transform Module Level 2</a>&nbsp;specification</p>



<h2 id="syntax" class="wp-block-heading">Syntax</h2>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">translateZ() = translateZ(&lt;length>)</code></pre>



<p class="wp-block-paragraph">The&nbsp;<code>translateZ()</code>&nbsp;function takes a single&nbsp;<code>&lt;length&gt;</code>&nbsp;argument that defines how far the element is from the front of the screen. It&#8217;s used with the&nbsp;<code>transform</code>&nbsp;property</p>



<h2 id="argument" class="wp-block-heading">Arguments</h2>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Positive lengths */
transform: translateZ(100px);
transform: translateZ(5rem);

/* Negative lengths */
transform: translateZ(-50px);
transform: translateZ(-8em);</code></pre>



<p class="wp-block-paragraph">The&nbsp;<code>translateZ()</code>&nbsp;function takes a single argument:</p>



<ul class="wp-block-list is-style-almanac-list">
<li><strong><code>&lt;length></code>:</strong> the distance of the element from the front of the screen. When it is positive, the element moves closer to the user, and further away when it&#8217;s negative.</li>
</ul>



<h2 id="how-it-works" class="wp-block-heading">How it works</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateZ()</code>&nbsp;function is tricky because it moves an element along the Z-axis, which is not visually perceptible in a browser by default. Since browsers only render elements by their height and width, not their depth, the&nbsp;<code>translateZ()</code>&nbsp;function may appear to do nothing.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2560" height="1396" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?resize=2560%2C1396&#038;ssl=1" alt="A three-dimensional plane on top of a grid with perspective, showing the X, Y, and Z axes." class="wp-image-394787" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?w=2560&amp;ssl=1 2560w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?resize=300%2C164&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?resize=1024%2C559&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?resize=768%2C419&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?resize=1536%2C838&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/xyz-plane-scaled.png?resize=2048%2C1117&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p class="wp-block-paragraph">To show its depth and projection, we need to use either the&nbsp;<code><a href="https://css-tricks.com/almanac/properties/p/perspective/">perspective</a></code>&nbsp;property or&nbsp;<code>perspective()</code>&nbsp;function. Additionally, we can set&nbsp;<code>transform-style</code>&nbsp;to&nbsp;<code>preserve-3d</code>&nbsp;value on its parent, which lets CSS know that child elements should be positioned in 3D.</p>



<h2 id="projection-and-perspective" class="wp-block-heading">Projection and perspective</h2>



<p class="wp-block-paragraph">On a website, there isn&#8217;t a sense of depth — that is, &#8220;closeness&#8221; or &#8220;furtherness&#8221; — since elements are flattened on a 2D screen. Whether it&#8217;s&nbsp;<code>translate(200px)</code>&nbsp;or&nbsp;<code>translate(20px)</code>, we perceive the element at the same distance, so there isn&#8217;t any perspective at all unless we explicitly enable it. To show that, take for example the following HTML:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="scene">
  &lt;div class="parent">
    &lt;div class="box">translateZ(100px)&lt;/div>
  &lt;/div>
&lt;/div></code></pre>



<p class="wp-block-paragraph">Firstly, we&#8217;ll enable some perspective in the whole scene:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.scene {
  perspective: 800px;
}</code></pre>



<p class="wp-block-paragraph">Then, we&#8217;ll set&nbsp;<code><a href="https://css-tricks.com/almanac/properties/t/transform-style/">transform-style</a></code>&nbsp;to&nbsp;<code>preserve-3d</code>&nbsp;in the parent, so children will also be transformed in 3D:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent {
  transform-style: preserve-3d;
}</code></pre>



<p class="wp-block-paragraph">Now we move the&nbsp;<code>.box</code>&nbsp;<code>100px</code>&nbsp;closer to the user using&nbsp;<code>translateZ()</code>.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.box {
  transform: translateZ(100px);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_QwEPJQb" src="//codepen.io/anon/embed/QwEPJQb?height=500&amp;theme-id=1&amp;slug-hash=QwEPJQb&amp;default-tab=result" height="500" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed QwEPJQb" title="CodePen Embed QwEPJQb" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Even though it looks like the box grew&nbsp;<code>100px</code>&nbsp;in size, when you rotate the parent to the side, you&#8217;ll see that the&nbsp;<code>.box</code>&nbsp;size didn&#8217;t increase, but it&#8217;s the distance between the&nbsp;<code>.parent</code>&nbsp;and the&nbsp;<code>.box</code>&nbsp;that did.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1040" height="570" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/size-e1778684658246.png?resize=1040%2C570&#038;ssl=1" alt="A tall blue rectangle rotated left along the Y-axis adding perspective." class="wp-image-394789" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/size-e1778684658246.png?w=1040&amp;ssl=1 1040w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/size-e1778684658246.png?resize=300%2C164&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/size-e1778684658246.png?resize=1024%2C561&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/size-e1778684658246.png?resize=768%2C421&amp;ssl=1 768w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<h2 id="-perspective-vs-perspective-" class="wp-block-heading"><code>perspective</code> vs. <code>perspective()</code></h2>



<p class="wp-block-paragraph">Both do the same work: <em>define the element&#8217;s projection.</em> The&nbsp;<code>perspective</code>&nbsp;property is applied to the parent for all 3D elements, while the&nbsp;<code>perspective()</code>&nbsp;function can only be applied to a single 3D element, and must be declared before the 3D transform function.</p>



<h3 id="the-perspective-property" class="wp-block-heading">The <strong><code>perspective</code></strong> property</h3>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent {
  perspective: 800px;
}

.child-1 {
  transform: translateZ(200px); /* Defined within a projection of 800px */
}

.child-2 {
  transform: translate3D(100px, 200px, 150px); /* Defined within a projection of 800px */
}</code></pre>



<h3 id="the-perspective-function" class="wp-block-heading">The <strong><code>perspective()</code></strong> function</h3>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.element {
  transform: translateZ(100px) perspective(800px); /* Nope &#x274c; */
}

.element {
  transform: perspective(800px) translateZ(100px); /* Yep &#x2705; */
}</code></pre>



<h2 id="it-can-also-be-used-to-optimize-web-performance" class="wp-block-heading">It can also be used to optimize web performance</h2>



<p class="wp-block-paragraph">Did you know that you can use the&nbsp;<code>translateZ()</code>&nbsp;function to boost our website&#8217;s performance? CSS 3D transform functions use the <em>GPU</em>, which is faster and more superior to the <em>CPU</em> for element rendering. This performance hack prevents flickering during animations and makes transitions smoother.</p>



<p class="wp-block-paragraph">Developers add&nbsp;<code>translateZ(0)</code>&nbsp;to shift rendering from the CPU to the GPU, improving performance. If you&#8217;re struggling with a glitching animation, now you&#8217;ve s way to fix it!</p>



<h2 id="demo" class="wp-block-heading">Demo</h2>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_gbMyQjy" src="//codepen.io/anon/embed/preview/gbMyQjy?height=450&amp;theme-id=1&amp;slug-hash=gbMyQjy&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed gbMyQjy" title="CodePen Embed gbMyQjy" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="specification" class="wp-block-heading">Specification</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateZ()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-2/#funcdef-translatez" rel="noopener">CSS Transform Module Level 2</a>&nbsp;specification.</p>



<h2 id="browser-support" class="wp-block-heading">Browser support</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateZ()</code>&nbsp;function is available on all modern browsers.</p>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="transforms3d"></baseline-status>



<h2 id="references" class="wp-block-heading">References</h2>



<ul class="wp-block-list">
<li><a href="https://www.digitalocean.com/community/tutorials/css-translatez-and-perspective" rel="noopener">Tricks for Using CSS translateZ and perspective()</a>&nbsp;by William Le</li>
</ul>



<h2 id="more-on-3d-transforms" class="wp-block-heading">More on 3D transforms!</h2>



    		
    <div class="in-article-cards">
      <article class="in-article-card articles" id="mini-post-320275">

      <div class="tags">
      <a href="https://css-tricks.com/tag/perspective/" rel="tag">perspective</a> <a href="https://css-tricks.com/tag/perspective-origin/" rel="tag">perspective-origin</a> <a href="https://css-tricks.com/tag/transform/" rel="tag">transform</a>    </div>
  
  <time datetime="2020-09-09" title="Originally published Sep 9, 2020">
    <strong>
                
        Article
      </strong>

    on

    Sep 9, 2020  </time>

  <h3>
    <a href="https://css-tricks.com/how-css-perspective-works/">
      How CSS Perspective Works    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/amitsheen/" aria-label="Author page of Amit Sheen">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/06/img3.png?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/amitsheen/">
      Amit Sheen    </a>
  </div>

</article>
<article class="in-article-card articles" id="mini-post-365706">

      <div class="tags">
      <a href="https://css-tricks.com/tag/3d/" rel="tag">3d</a> <a href="https://css-tricks.com/tag/animation/" rel="tag">animation</a> <a href="https://css-tricks.com/tag/animation-delay/" rel="tag">animation-delay</a>    </div>
  
  <time datetime="2022-05-12" title="Originally published May 12, 2022">
    <strong>
                
        Article
      </strong>

    on

    May 12, 2022  </time>

  <h3>
    <a href="https://css-tricks.com/a-css-slinky-in-3d/">
      A CSS Slinky in 3D? Challenge Accepted!    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/jheytompkins/" aria-label="Author page of Jhey Tompkins">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/88f05a8f8ee43ecf0e6752ed506b28f9ba34e86e3e0d887fba2c4c596a2c9531.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/88f05a8f8ee43ecf0e6752ed506b28f9ba34e86e3e0d887fba2c4c596a2c9531.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/jheytompkins/">
      Jhey Tompkins    </a>
  </div>

</article>
    </div>
  



<p class="wp-block-paragraph"></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translatez/">translateZ()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


The CSS translateZ() function adds depth to an element, drawing it closer or farther in space. In other words, it shifts an element along the Z-axis in a 3D space.




.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}
Either the perspective() function or perspective property is necessary for translateZ() to work. Without either one, there’s no effect.
Activate the switch in the following demo, then hover over the box to see it appear closer:
CodePen Embed Fallback
While it looks like the .box element is getting bigger” on hover, that’s not what is happening. When you hover over the box, it actually moves closer to you a length of 100 pixels, making it appear larger. We’ll get more into that in just a bit so it’s more obvious what’s happening there.
translateZ() should not be mistaken for an alternative to the scale() function or scale property. Perspective and scale are two different concepts.
The translateZ() function is defined in the CSS Transform Module Level 2 specification
Syntax
translateZ() = translateZ(<length>)
The translateZ() function takes a single <length> argument that defines how far the element is from the front of the screen. It’s used with the transform property
Arguments
/* Positive lengths */
transform: translateZ(100px);
transform: translateZ(5rem);

/* Negative lengths */
transform: translateZ(-50px);
transform: translateZ(-8em);
The translateZ() function takes a single argument:
<length>: the distance of the element from the front of the screen. When it is positive, the element moves closer to the user, and further away when it’s negative.
How it works
The translateZ() function is tricky because it moves an element along the Z-axis, which is not visually perceptible in a browser by default. Since browsers only render elements by their height and width, not their depth, the translateZ() function may appear to do nothing.




To show its depth and projection, we need to use either the perspective property or perspective() function. Additionally, we can set transform-style to preserve-3d value on its parent, which lets CSS know that child elements should be positioned in 3D.
Projection and perspective
On a website, there isn’t a sense of depth — that is, “closeness” or “furtherness” — since elements are flattened on a 2D screen. Whether it’s translate(200px) or translate(20px), we perceive the element at the same distance, so there isn’t any perspective at all unless we explicitly enable it. To show that, take for example the following HTML:
<div class="scene">
  <div class="parent">
    <div class="box">translateZ(100px)</div>
  </div>
</div>
Firstly, we’ll enable some perspective in the whole scene:
.scene {
  perspective: 800px;
}
Then, we’ll set transform-style to preserve-3d in the parent, so children will also be transformed in 3D:
.parent {
  transform-style: preserve-3d;
}
Now we move the .box 100px closer to the user using translateZ().
.box {
  transform: translateZ(100px);
}
CodePen Embed Fallback
Even though it looks like the box grew 100px in size, when you rotate the parent to the side, you’ll see that the .box size didn’t increase, but it’s the distance between the .parent and the .box that did.




perspective vs. perspective()
Both do the same work: define the element’s projection. The perspective property is applied to the parent for all 3D elements, while the perspective() function can only be applied to a single 3D element, and must be declared before the 3D transform function.
The perspective property
.parent {
  perspective: 800px;
}

.child-1 {
  transform: translateZ(200px); /* Defined within a projection of 800px */
}

.child-2 {
  transform: translate3D(100px, 200px, 150px); /* Defined within a projection of 800px */
}
The perspective() function
.element {
  transform: translateZ(100px) perspective(800px); /* Nope ❌ */
}

.element {
  transform: perspective(800px) translateZ(100px); /* Yep ✅ */
}
It can also be used to optimize web performance
Did you know that you can use the translateZ() function to boost our website’s performance? CSS 3D transform functions use the GPU, which is faster and more superior to the CPU for element rendering. This performance hack prevents flickering during animations and makes transitions smoother.
Developers add translateZ(0) to shift rendering from the CPU to the GPU, improving performance. If you’re struggling with a glitching animation, now you’ve s way to fix it!
Demo
CodePen Embed Fallback
Specification
The translateZ() function is defined in the CSS Transform Module Level 2 specification.
Browser support
The translateZ() function is available on all modern browsers.




References
Tricks for Using CSS translateZ and perspective() by William Le
More on 3D transforms!
perspective perspective-origin transform    
    
  
    
      Amit Sheen    
  
3d animation animation-delay    
    
  
    
      Jhey Tompkins    
  


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

The translateZ() function moves an element closer to or farther from the user. 
translateZ() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

translateZ()

<p>The <code>translateY()</code> function shifts an element vertically by the specified amount. </p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translatey/">translateY()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translateY()</code>&nbsp;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.</p>



<span id="more-393249"></span>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent:hover .box {
  transform: translateY(50%); /* Shift down by half the element's height */
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_qENJLYP" src="//codepen.io/anon/embed/qENJLYP?height=450&amp;theme-id=1&amp;slug-hash=qENJLYP&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed qENJLYP" title="CodePen Embed qENJLYP" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Along with other transform functions, it is used inside the&nbsp;<a href="https://css-tricks.com/almanac/properties/t/transform/"><code>transform</code></a>&nbsp;property.</p>



<p class="wp-block-paragraph">It is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale" rel="noopener">CSS Transforms Module Level 1</a>&nbsp;draft.</p>



<h2 id="syntax" class="wp-block-heading">Syntax</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateY()</code>&nbsp;function&#8217;s syntax looks like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">&lt;translateY()> = translateY( &lt;length-percentage> )</code></pre>



<p class="wp-block-paragraph">Just a fancy way of saying: <em>Translate (or move) the element vertically by this much.</em></p>



<h2 id="argument" class="wp-block-heading">Arguments</h2>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* &lt;length> */
translateY(80px) /* Element moves 80px down*/
translateY(-24ch) /* Element moves 24ch up */

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



<p class="wp-block-paragraph">The&nbsp;<code>translateX()</code>&nbsp;function takes a single&nbsp;<code>&lt;length-percentage&gt;</code>&nbsp;argument that specifies how far to move the element and in which direction, which can be either up (negative) or down (positive).</p>



<p class="wp-block-paragraph">It can take either a&nbsp;<code>&lt;length&gt;</code>&nbsp;or a&nbsp;<code>&lt;percentage&gt;</code>&nbsp;argument:</p>



<ul class="wp-block-list is-style-almanac-list">
<li><strong><code>&lt;length&gt;</code>:</strong>&nbsp;When it&#8217;s positive, e.g.&nbsp;<code>20px</code>, it pushes the element 20 pixels down, while negative values like&nbsp;<code>-20px</code>&nbsp;will push the element 20 pixels up.</li>



<li><strong><code>&lt;percentage&gt;</code>:</strong>&nbsp;Percentages are relative to the element&#8217;s height, so&nbsp;<code>translateY(40%)</code>&nbsp;on a 100px-tall element pushes the element&nbsp;<code>40px</code>&nbsp;down, while&nbsp;<code>translateY(-40%)</code>&nbsp;pushes the element&nbsp;<code>40px</code>&nbsp;up.</li>
</ul>



<h2 id="basic-usage" class="wp-block-heading">Basic usage</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translate</code>&nbsp;functions are ideal for simpler animations since they don&#8217;t disturb the document flow. Specifically, the&nbsp;<code>translateY()</code>&nbsp;function is great for &#8220;pop-up&#8221; or &#8220;fade-in&#8221; animations where the elements can slide from the bottom. Take for example, a card component (let&#8217;s call it&nbsp;<code>.stat-card</code>) that slides up when the user clicks a button or scrolls down.</p>



<p class="wp-block-paragraph">The components are initially displaced 50 pixels downwards, hidden with an&nbsp;<code>opacity</code>&nbsp;value of&nbsp;<code>0</code>.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.stat-card {
  /* ... */
  opacity: 0;
  transform: translateY(50px);

  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}</code></pre>



<p class="wp-block-paragraph">Then, when another element (let&#8217;s call it&nbsp;<code>.dashboard</code>) becomes&nbsp;<code>.active</code>, the&nbsp;<code>.stat-card</code>&nbsp;components become fully visible and are translated into their original position on the page.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.dashboard.active .stat-card {
  opacity: 1;
  transform: translateY(0);
}</code></pre>



<p class="wp-block-paragraph">We can even add a &#8220;micro-animation&#8221; whenever the user hovers over any of the&nbsp;<code>.stat-card</code>&nbsp;by moving it slightly up by&nbsp;<code>8px</code>, thanks to using a negative value:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.dashboard.active .stat-card:hover {
  transform: translateY(-8px);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_KwgQJpg" src="//codepen.io/anon/embed/KwgQJpg?height=600&amp;theme-id=1&amp;slug-hash=KwgQJpg&amp;default-tab=result" height="600" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed KwgQJpg" title="CodePen Embed KwgQJpg" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="focused-form-field-animation" class="wp-block-heading">Focused form field animation</h2>



<p class="wp-block-paragraph">Form fields usually use a blue border to indicate focus, but they can be more interesting. In UI libraries like&nbsp;<a href="https://mui.com/" rel="noopener">MUI</a>, the&nbsp;<a href="https://mui.com/material-ui/react-text-field/" rel="noopener">TextField</a>&nbsp;component&#8217;s label initially serves as a placeholder, but when a user focuses on the field, it moves to the top and assumes the label&#8217;s position.</p>



<p class="wp-block-paragraph">We can implement a similar animation by applying the&nbsp;<code>translateY()</code>&nbsp;function to the&nbsp;<code>input</code>&nbsp;and&nbsp;<code>label</code>&nbsp;elements.</p>



<p class="wp-block-paragraph">To start, we initially place the&nbsp;<code>label</code>&nbsp;element within the&nbsp;<code>input</code>&nbsp;element as a placeholder using&nbsp;<code>absolute</code>&nbsp;positioning.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">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);
}</code></pre>



<p class="wp-block-paragraph">Then, when the user focuses on the&nbsp;<code>input</code>&nbsp;field, the&nbsp;<code>label</code>&nbsp;is translated&nbsp;<code>32px</code>&nbsp;up to serve as a label.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-32px) scale(0.8);
  color: #6200ee;
  font-weight: bold;
}</code></pre>



<p class="wp-block-paragraph">The&nbsp;<code>label</code>&#8216;s position is restored when the user loses focus from the&nbsp;<code>input</code>&nbsp;element.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_ByzqoJY" src="//codepen.io/anon/embed/ByzqoJY?height=450&amp;theme-id=1&amp;slug-hash=ByzqoJY&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ByzqoJY" title="CodePen Embed ByzqoJY" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="it-doesn-t-affect-other-elements" class="wp-block-heading">It doesn&#8217;t affect other elements</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateY()</code>&nbsp;function, like other&nbsp;<code>transform</code>&nbsp;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&#8217;t moved at all.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateY(40px);
}</code></pre>



<p class="wp-block-paragraph">Notice how shifting the &#8220;Translated&#8221; element does not affect the placement of the other elements around it.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_dPpJBJN" src="//codepen.io/anon/embed/dPpJBJN?height=450&amp;theme-id=1&amp;slug-hash=dPpJBJN&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed dPpJBJN" title="CodePen Embed dPpJBJN" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Unlike&nbsp;<code>margin</code> which can trigger reflows or shift neighboring elements,&nbsp;<code>translateY()</code>&nbsp;only changes where the element is visually rendered.</p>



<h2 id="issues-with-pointer-pseudo-classes" class="wp-block-heading">Issues with pointer pseudo-classes</h2>



<p class="wp-block-paragraph">Using&nbsp;<code>translateY()</code>&nbsp;directly on a pointer pseudo-classes like&nbsp;<code>:hover</code>&nbsp;can sometimes break interactions. In a situation where the element is translated far and it moves away from the cursor, the&nbsp;<code>:hover</code>&nbsp;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.</p>



<p class="wp-block-paragraph">A simple solution to this is to place the element to be translated in a parent container, and apply the pseudo-class (<code>:hover</code>) to the parent element, while the main element takes the translate function.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Problem case */
.bad:hover {
  transform: translateY(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateY(160px);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_vEXpqrJ" src="//codepen.io/anon/embed/vEXpqrJ?height=450&amp;theme-id=1&amp;slug-hash=vEXpqrJ&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed vEXpqrJ" title="CodePen Embed vEXpqrJ" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="demo" class="wp-block-heading">Demo</h2>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_PwzxVQM" src="//codepen.io/anon/embed/PwzxVQM?height=600&amp;theme-id=1&amp;slug-hash=PwzxVQM&amp;default-tab=result" height="600" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed PwzxVQM" title="CodePen Embed PwzxVQM" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="specification" class="wp-block-heading">Specification</h2>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translateY()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale" rel="noopener">CSS Transforms Module Level 1</a>, which is currently in Editor&#8217;s Drafts.</p>



<h2 id="browser-support" class="wp-block-heading">Browser support</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateY()</code>&nbsp;function has baseline support on all modern browsers.</p>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="transforms2d"></baseline-status>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translatey/">translateY()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


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.

The translateY() function shifts an element vertically by the specified amount. 
translateY() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

translateY()

<p>The <code>translateX()</code> function shifts an element horizontally by the specified amount. </p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translatex/">translateX()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translateX()</code>&nbsp;function shifts an element horizontally by the specified amount. Specifically, it displaces an element to the right or the left, depending on whether the value is positive or negative.</p>



<span id="more-393255"></span>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent:hover .box {
  transform: translateX(50%);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_LEZgMmO" src="//codepen.io/anon/embed/LEZgMmO?height=450&amp;theme-id=1&amp;slug-hash=LEZgMmO&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed LEZgMmO" title="CodePen Embed LEZgMmO" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Along with other transform functions, it is used inside the&nbsp;<a href="https://css-tricks.com/almanac/properties/t/transform/"><code>transform</code></a>&nbsp;property.</p>



<p class="wp-block-paragraph">It is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale" rel="noopener">CSS Transforms Module Level 1</a>&nbsp;draft.</p>



<h2 id="syntax" class="wp-block-heading">Syntax</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateX()</code>&nbsp;function has a simple syntax given as:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">&lt;translateX()> = translateX( &lt;length-percentage> )</code></pre>



<p class="wp-block-paragraph">Or, in plain English: <em>Translate (or move) this element horizontally by this much.</em></p>



<h2 id="argument" class="wp-block-heading">Arguments</h2>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* &lt;length> */
translateY(80px) /* Element moves 80px to the bottom */
translateY(-24ch) /* Element moves 24ch to the top */

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



<p class="wp-block-paragraph">The&nbsp;<code>translateX()</code>&nbsp;function takes a single&nbsp;<code>&lt;length-percentage&gt;</code>&nbsp;argument that specifies how far to move the element and in which direction, which can be either left (negative) or right (positive).</p>



<p class="wp-block-paragraph">The argument passed could be either a&nbsp;<code>&lt;length&gt;</code>&nbsp;or a&nbsp;<code>&lt;percentage&gt;</code>:</p>



<ul class="wp-block-list is-style-almanac-list">
<li><strong><code>&lt;length&gt;</code>:</strong>&nbsp;When it&#8217;s positive, say&nbsp;<code>50px</code>, the element moves 50 pixels to the right. On the other hand, in the case of&nbsp;<code>-40ch</code>, the element moves 40 characters to the left.</li>



<li><strong><code>&lt;percentage&gt;</code>:</strong>&nbsp;Percentages are relative to the element&#8217;s width. So, for a&nbsp;<code>400px</code>-wide element,&nbsp;<code>translateX(50%)</code> moves it&nbsp;<code>200px</code>&nbsp;to the right, while&nbsp;<code>translateX(-50%)</code>&nbsp;moves it&nbsp;<code>200px</code>&nbsp;to the left.</li>
</ul>



<h2 id="basic-usage" class="wp-block-heading">Basic usage</h2>



<p class="wp-block-paragraph">We can use the&nbsp;<code>translateX()</code>&nbsp;function to make elements slide onto the webpage in lots of ways. For instance, a sidebar that slides in from the left (or right) when clicking a menu button. To achieve this, we initially shift the sidebar completely off the page:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.sidebar {
  transform: translateX(-100%);
  transition: transform 0.2s ease-in;
}</code></pre>



<p class="wp-block-paragraph">Then, with a little JavaScript, we can toggle an&nbsp;<code>.open</code>&nbsp;class whenever the user clicks on the menu buttons. This moves the sidebar back into the page from the left:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.sidebar.open {
  transform: translateX(0);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_jEMZdmy" src="//codepen.io/anon/embed/jEMZdmy?height=450&amp;theme-id=1&amp;slug-hash=jEMZdmy&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed jEMZdmy" title="CodePen Embed jEMZdmy" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="infinite-marquee" class="wp-block-heading">Example: Infinite marquee</h2>



<p class="wp-block-paragraph">Marquees in web development are information banner components that scroll automatically. On most websites, they are used to display company logos, perhaps sponsors or clients, or, as in this case, announce new arrivals on an e-commerce site.</p>



<p class="wp-block-paragraph">Similar to the last example, we can use the&nbsp;<code>translateX()</code>&nbsp;function to smoothly scroll a marquee component:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.marquee-content {
  animation: marquee-scroll 20s linear infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}</code></pre>



<p class="wp-block-paragraph">The&nbsp;<code>marquee-scroll</code>&nbsp;keyframes defines how the component scrolls from the start stage to the stop stage, where the component is shifted by half its width towards the left.</p>



<p class="wp-block-paragraph">To make it scroll infinitely, the&nbsp;<code>animation-iteration-count</code>&nbsp;is set to&nbsp;<code>infinite</code>&nbsp;on the&nbsp;<code><a href="https://css-tricks.com/almanac/properties/a/animation/">animation</a></code>&nbsp;shorthand property.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_wBWYKpm" src="//codepen.io/anon/embed/preview/wBWYKpm?height=400&amp;theme-id=1&amp;slug-hash=wBWYKpm&amp;default-tab=result" height="400" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed wBWYKpm" title="CodePen Embed wBWYKpm" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="skeleton-shimmer-animation" class="wp-block-heading">Example: Skeleton layout animation</h2>



<p class="wp-block-paragraph"><a href="https://css-tricks.com/a-bare-bones-approach-to-versatile-and-reusable-skeleton-loaders/">Skeletons loaders</a> act as placeholders until the main content loads and replaces them, preventing unexpected layout shifts. They can be a static gray div of different shapes and sizes of the original content, or we can make them more interesting with a shimmer effect.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="340" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?resize=1024%2C340&#038;ssl=1" alt="Empty boxes (with a solid color or gradient background) are used as a placeholder while content is being gradually loaded. Text content is loaded and displayed first, and images are loaded and displayed after that." class="wp-image-335004" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?resize=1024%2C340&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?resize=300%2C100&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?resize=768%2C255&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?resize=1536%2C510&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?resize=1000%2C332&amp;ssl=1 1000w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/02/s_94397AB2C9D282B1C64AD8782FA74B7FBE105F79E31213B340BF4A9C4995557F_1612947653028_NewProject2.jpg?w=2000&amp;ssl=1 2000w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p class="wp-block-paragraph">Using the&nbsp;<code>::after</code>&nbsp;pseudoelement, we can set a default&nbsp;<code>transform: translateX(-120%);</code>, then use a&nbsp;<code>shimmer</code>&nbsp;animation to move it through the&nbsp;<code>.skeleton</code>&nbsp;component infinitely.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;

  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
  animation: shimmer 1.15s linear infinite;
}</code></pre>



<p class="wp-block-paragraph">The&nbsp;<code>shimmer</code>&nbsp;keyframe translates the pseudoelement from&nbsp;<code>-120%</code>&nbsp;(off the element from the left) to&nbsp;<code>120%</code>&nbsp;(out of the page on the right), then starts again</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@keyframes shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_GgqwPry" src="//codepen.io/anon/embed/preview/GgqwPry?height=450&amp;theme-id=1&amp;slug-hash=GgqwPry&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed GgqwPry" title="CodePen Embed GgqwPry" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h3 id="it-doesn-t-affect-other-elements" class="wp-block-heading">It doesn&#8217;t affect other elements</h3>



<p class="wp-block-paragraph">The&nbsp;<code>translateX()</code>&nbsp;function, like other&nbsp;<code>transform</code>&nbsp;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&#8217;t moved at all.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateX(80px);
}</code></pre>



<p class="wp-block-paragraph">Notice how the &#8220;Translated&#8221; element does not cause either the Box 1 or Box 3 elements to shift when it moves.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_raMpEpB" src="//codepen.io/anon/embed/raMpEpB?height=450&amp;theme-id=1&amp;slug-hash=raMpEpB&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed raMpEpB" title="CodePen Embed raMpEpB" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Unlike&nbsp;<code>margin</code> which can trigger reflows or shift neighboring elements,&nbsp;<code>translate</code>&nbsp;only changes where the element is visually rendered.</p>



<h2 id="issues-with-pointer-pseudo-classes" class="wp-block-heading">Issues with pointer pseudo-classes</h2>



<p class="wp-block-paragraph">Using&nbsp;<code>translateX()</code>&nbsp;directly on a pointer pseudo-classes like&nbsp;<code>:hover</code>&nbsp;can sometimes break interactions. In a situation where the element is translated far and it moves away from the cursor, the&nbsp;<code>:hover</code>&nbsp;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.</p>



<p class="wp-block-paragraph">A simple solution to this is to place the element to be translated in a parent container, and apply the pseudo-class (<code>:hover</code>) to the parent element, while the main element takes the translate function.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_MYjrMGM" src="//codepen.io/anon/embed/MYjrMGM?height=450&amp;theme-id=1&amp;slug-hash=MYjrMGM&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed MYjrMGM" title="CodePen Embed MYjrMGM" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="specification" class="wp-block-heading">Specification</h2>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translateX()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale" rel="noopener">CSS Transforms Module Level 1</a>, which is currently in Editor&#8217;s Drafts.</p>



<h2 id="browser-support" class="wp-block-heading">Browser support</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateX()</code>&nbsp;function has baseline support on all modern browsers.</p>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="transforms2d"></baseline-status>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translatex/">translateX()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


The CSS translateX() function shifts an element horizontally by the specified amount. Specifically, it displaces an element to the right or the left, depending on whether the value is positive or negative.




.parent:hover .box {
  transform: translateX(50%);
}
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 translateX() function has a simple syntax given as:
<translateX()> = translateX( <length-percentage> )
Or, in plain English: Translate (or move) this element horizontally by this much.
Arguments
/* <length> */
translateY(80px) /* Element moves 80px to the bottom */
translateY(-24ch) /* Element moves 24ch to the top */

/* <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 left (negative) or right (positive).
The argument passed could be either a <length> or a <percentage>:
<length>: When it’s positive, say 50px, the element moves 50 pixels to the right. On the other hand, in the case of -40ch, the element moves 40 characters to the left.
<percentage>: Percentages are relative to the element’s width. So, for a 400px-wide element, translateX(50%) moves it 200px to the right, while translateX(-50%) moves it 200px to the left.
Basic usage
We can use the translateX() function to make elements slide onto the webpage in lots of ways. For instance, a sidebar that slides in from the left (or right) when clicking a menu button. To achieve this, we initially shift the sidebar completely off the page:
.sidebar {
  transform: translateX(-100%);
  transition: transform 0.2s ease-in;
}
Then, with a little JavaScript, we can toggle an .open class whenever the user clicks on the menu buttons. This moves the sidebar back into the page from the left:
.sidebar.open {
  transform: translateX(0);
}
CodePen Embed Fallback
Example: Infinite marquee
Marquees in web development are information banner components that scroll automatically. On most websites, they are used to display company logos, perhaps sponsors or clients, or, as in this case, announce new arrivals on an e-commerce site.
Similar to the last example, we can use the translateX() function to smoothly scroll a marquee component:
.marquee-content {
  animation: marquee-scroll 20s linear infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
The marquee-scroll keyframes defines how the component scrolls from the start stage to the stop stage, where the component is shifted by half its width towards the left.
To make it scroll infinitely, the animation-iteration-count is set to infinite on the animation shorthand property.
CodePen Embed Fallback
Example: Skeleton layout animation
Skeletons loaders act as placeholders until the main content loads and replaces them, preventing unexpected layout shifts. They can be a static gray div of different shapes and sizes of the original content, or we can make them more interesting with a shimmer effect.




Using the ::after pseudoelement, we can set a default transform: translateX(-120%);, then use a shimmer animation to move it through the .skeleton component infinitely.
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;

  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
  animation: shimmer 1.15s linear infinite;
}
The shimmer keyframe translates the pseudoelement from -120% (off the element from the left) to 120% (out of the page on the right), then starts again
@keyframes shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
CodePen Embed Fallback
It doesn’t affect other elements
The translateX() 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: translateX(80px);
}
Notice how the “Translated” element does not cause either the Box 1 or Box 3 elements to shift when it moves.
CodePen Embed Fallback
Unlike margin which can trigger reflows or shift neighboring elements, translate only changes where the element is visually rendered.
Issues with pointer pseudo-classes
Using translateX() 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: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}
CodePen Embed Fallback
Specification
The CSS translateX() function is defined in the CSS Transforms Module Level 1, which is currently in Editor’s Drafts.
Browser support
The translateX() function has baseline support on all modern browsers.


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

The translateX() function shifts an element horizontally by the specified amount. 
translateX() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

translateX()

<p>The CSS <code>translate()</code> function shifts an element from its default position on a 2-dimensional plane</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translate/">translate()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translate()</code>&nbsp;function shifts an element from its default position on a two-dimensional plane. This way, we can reposition an element horizontally, vertically, or both.</p>



<span id="more-393233"></span>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent:hover .box {
  transform: translate(50px, 50%);
}</code></pre>



<p class="wp-block-paragraph">Hover over the box to see it move 50% of its width towards the left:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_MYePwXV" src="//codepen.io/anon/embed/MYePwXV?height=450&amp;theme-id=1&amp;slug-hash=MYePwXV&amp;default-tab=css,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed MYePwXV" title="CodePen Embed MYePwXV" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Along with other transform functions, it is used inside the&nbsp;<a href="https://css-tricks.com/almanac/properties/t/transform/">transform</a>&nbsp;property.</p>



<p class="wp-block-paragraph">The&nbsp;<code>translate()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale" rel="noopener">CSS Transforms Module Level 1</a>&nbsp;draft.</p>



<h2 id="syntax" class="wp-block-heading">Syntax</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translate()</code>&nbsp;function&#8217;s syntax looks like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">&lt;translate()> = translate( &lt;length-percentage>, &lt;length-percentage>? )</code></pre>



<p class="wp-block-paragraph">&#8230;which is just a fancy way of saying we can move (translate) and element by one or two lengths or percentages. We&#8217;ll get into some examples in a bit. But first:</p>



<h2 id="argument" class="wp-block-heading">Arguments</h2>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Single argument */
translate(100px) /* moves 100px to the right */
translate(-100%) /* moves 100% of the element's width to the left */

/* Double argument */
translate(50px, 100px) /* moves 50px down, then 100px to the right */
translate(50%, 100%) /* moves 50% of the element's width downwards, then 100% its height to the right */</code></pre>



<p class="wp-block-paragraph">The&nbsp;<code>translate()</code>&nbsp;function takes two&nbsp;<code>&lt;length-percentage&gt;</code>&nbsp;arguments (<code>tx</code>,&nbsp;<code>ty</code>, as in &#8220;translate horizontally&#8221; and &#8220;translate vertically&#8221;). These tell the browser how much to move the element and in which direction direction (whether it&#8217;s positive or negative).</p>



<ul class="wp-block-list is-style-almanac-list">
<li><strong><code>tx</code></strong>:&nbsp;Specifies the displacement in the horizontal axis. If it&#8217;s positive, the element goes right. If it&#8217;s negative, the element shifts to the left.</li>



<li><strong><code>ty</code>&nbsp;(optional)</strong>:&nbsp;Specifies the displacement in the vertical axis. If it&#8217;s positive, the element goes downward, and if it&#8217;s negative, the element moves upward.</li>
</ul>



<p class="wp-block-paragraph">If only one argument is passed, it&#8217;s assumed to be&nbsp;<code>tx</code>. Alternatively, when both arguments are passed, the second argument will be&nbsp;<code>ty</code>. Together, they shift the element diagonally.</p>



<p class="wp-block-paragraph">You&#8217;ll also notice that we can use either&nbsp;<code>&lt;length&gt;</code>&nbsp;or&nbsp;<code>&lt;percentage&gt;</code>&nbsp;values. A&nbsp;<code>&lt;length&gt;</code>&nbsp;value is absolute, while a&nbsp;<code>&lt;percentage&gt;</code>&nbsp;value is relative to the element&#8217;s width (for&nbsp;<code>tx</code>) or height (for&nbsp;<code>ty</code>).</p>



<h3 id="basic-usage" class="wp-block-heading">Basic usage</h3>



<p class="wp-block-paragraph">While we have many ways to&nbsp;<a href="https://css-tricks.com/centering-css-complete-guide/">center an element in CSS</a>, for most of its history, our best shot to center an absolute element was using the&nbsp;<code>translate()</code>&nbsp;function.</p>



<p class="wp-block-paragraph">The process goes as follows: given an absolute element, we usually shift it to the center using&nbsp;<code>top: 50%</code>&nbsp;and&nbsp;<code>left: 50%</code>. However, these alone only fix the top-left corner of the element in the center, not the element itself. To fix this, we use&nbsp;<code>transform: translate(-50%, -50%)</code>&nbsp;to shift the element back by half of its own width and height.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0.9);
}</code></pre>



<p class="is-style-explanation wp-block-paragraph">More recently, we can do this using the&nbsp;<a href="https://css-tricks.com/yet-another-way-to-center-an-absolute-element/">known&nbsp;<code>justify-self</code>&nbsp;and&nbsp;<code>align-self</code>&nbsp;properties</a>. Alternatively, we could have used the semantic&nbsp;<code>dialog</code>&nbsp;modal which is centered by default.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_GgqYPQX" src="//codepen.io/anon/embed/GgqYPQX?height=500&amp;theme-id=1&amp;slug-hash=GgqYPQX&amp;default-tab=result" height="500" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed GgqYPQX" title="CodePen Embed GgqYPQX" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="diagonal-movements" class="wp-block-heading">Diagonal movements</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translateX()</code>&nbsp;function moves elements horizontally, while&nbsp;<code>translateY()</code>&nbsp;handles the vertical axis. If we instead want diagonal movement, we could combine both or use the shorter&nbsp;<code>translate()</code>&nbsp;function.</p>



<p class="wp-block-paragraph">A common use case would be to translate an element into the page from any corner. For example, if we had a <a href="https://css-tricks.com/toast/">Toast component</a> and wanted it to slide in from the bottom-right, we could move the element through the <code>bottom</code>&nbsp;and&nbsp;<code>right</code>&nbsp;properties, then offset them off the page with&nbsp;<code>translate()</code>.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;

  transform: translate(40px, 40px);
  transition: transform 0.28s ease;
}</code></pre>



<p class="wp-block-paragraph">Then, when a&nbsp;<code>.show</code>&nbsp;class is triggered, the&nbsp;<code>translate()</code>&nbsp;values are reset, causing them to slide in diagonally:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.toast.show {
  opacity: 1;
  transform: translate(0, 0);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_YPWRzvG" src="//codepen.io/anon/embed/YPWRzvG?height=450&amp;theme-id=1&amp;slug-hash=YPWRzvG&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed YPWRzvG" title="CodePen Embed YPWRzvG" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="it-doesn-t-affect-other-elements" class="wp-block-heading">It doesn&#8217;t affect other elements</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translate()</code>&nbsp;function, like other&nbsp;<code>transform</code>&nbsp;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&#8217;t moved at all.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translate(80px, 40px);
}</code></pre>



<p class="wp-block-paragraph">Notice how the &#8220;translated&#8221; element does not cause the Box 1 or Box 2 elements next to it to shift when it is moved.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_raMYbOj" src="//codepen.io/anon/embed/raMYbOj?height=450&amp;theme-id=1&amp;slug-hash=raMYbOj&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed raMYbOj" title="CodePen Embed raMYbOj" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">Unlike&nbsp;<code><a href="https://css-tricks.com/almanac/properties/m/margin/">margin</a></code>, which can trigger reflows or shift neighboring elements,&nbsp;<code>translate()</code>&nbsp;only changes where the element is visually rendered.</p>



<h2 id="issues-with-pointer-pseudo-classes" class="wp-block-heading">Issues with pointer pseudo-classes</h2>



<p class="wp-block-paragraph">Using&nbsp;<code>translate()</code>&nbsp;directly on a pointer pseudo-classes like&nbsp;<code><a href="https://css-tricks.com/almanac/pseudo-selectors/h/hover/">:hover</a></code>&nbsp;can sometimes make for bad interactions. In a situation where the element is translated far enough from the cursor, the&nbsp;<code>:hover</code>&nbsp;state ends, causing the element to snap back immediately to its original position. A position where the cursor still lingers, so it translates again, resulting in a continuous flickering loop.</p>



<p class="wp-block-paragraph">A simple solution to this is to place the element to be translated in a parent container, and apply the pseudo-class (<code>:hover</code>) to the parent, while the main element takes the translate function.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_wBzPZow" src="//codepen.io/anon/embed/wBzPZow?height=450&amp;theme-id=1&amp;slug-hash=wBzPZow&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed wBzPZow" title="CodePen Embed wBzPZow" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="demo" class="wp-block-heading">Demo</h2>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_WbxaYqa" src="//codepen.io/anon/embed/WbxaYqa?height=450&amp;theme-id=1&amp;slug-hash=WbxaYqa&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed WbxaYqa" title="CodePen Embed WbxaYqa" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<h2 id="specification" class="wp-block-heading">Specification</h2>



<p class="wp-block-paragraph">The CSS&nbsp;<code>translate()</code>&nbsp;function is defined in the&nbsp;<a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-scale" rel="noopener">CSS Transforms Module Level 1</a>, which is currently in Editor&#8217;s Drafts.</p>



<h2 id="browser-support" class="wp-block-heading">Browser support</h2>



<p class="wp-block-paragraph">The&nbsp;<code>translate()</code>&nbsp;function has baseline support on all modern browsers.</p>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="transforms2d"></baseline-status>



<h2 id="further-reading" class="wp-block-heading">Further reading</h2>



    		
    <div class="in-article-cards">
      <article class="in-article-card articles" id="mini-post-331840">

      <div class="tags">
      <a href="https://css-tricks.com/tag/rotate/" rel="tag">rotate</a> <a href="https://css-tricks.com/tag/scale/" rel="tag">scale</a> <a href="https://css-tricks.com/tag/transform/" rel="tag">transform</a> <a href="https://css-tricks.com/tag/translate/" rel="tag">translate</a>    </div>
  
  <time datetime="2020-12-30" title="Originally published Dec 30, 2020">
    <strong>
                
        Article
      </strong>

    on

    Dec 30, 2020  </time>

  <h3>
    <a href="https://css-tricks.com/css-individual-transform-properties-in-safari-technology-preview/">
      CSS Individual Transform Properties in Safari Technology Preview    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/geoffgraham/" aria-label="Author page of Geoff Graham">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/a8e040142716a4b44d014d80fbcf99c635b1d8faabfe469b6954a8ef2f168595.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/geoffgraham/">
      Geoff Graham    </a>
  </div>

</article>
<article class="in-article-card articles" id="mini-post-22270">

  
  <time datetime="2013-07-03" title="Originally published Jul 3, 2013">
    <strong>
                
        Article
      </strong>

    on

    Jul 3, 2013  </time>

  <h3>
    <a href="https://css-tricks.com/centering-percentage-widthheight-elements/">
      Centering Percentage Width/Height Elements    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/chriscoyier/" aria-label="Author page of Chris Coyier">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/chriscoyier/">
      Chris Coyier    </a>
  </div>

</article>
<article class="in-article-card articles" id="mini-post-276364">

      <div class="tags">
      <a href="https://css-tricks.com/tag/background/" rel="tag">background</a> <a href="https://css-tricks.com/tag/background-position/" rel="tag">background-position</a> <a href="https://css-tricks.com/tag/custom-properties/" rel="tag">custom properties</a> <a href="https://css-tricks.com/tag/javascript/" rel="tag">JavaScript</a>    </div>
  
  <time datetime="2018-10-04" title="Originally published Oct 4, 2018">
    <strong>
                
        Article
      </strong>

    on

    Oct 4, 2018  </time>

  <h3>
    <a href="https://css-tricks.com/moving-backgrounds-with-mouse-position/">
      Moving Backgrounds With Mouse Position    </a>
  </h3>

  
  <div class="author-row">
    <a href="https://css-tricks.com/author/chriscoyier/" aria-label="Author page of Chris Coyier">
      <img data-recalc-dims="1" alt='' src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795.jpg?resize=80%2C80&#038;ssl=1" srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/41a6f9778d12dfedcc7ec3727d64a12491d75d9a65d4b9323feb075391ae6795.jpg 2x' class='avatar avatar-80 photo' height="80" width="80" />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/chriscoyier/">
      Chris Coyier    </a>
  </div>

</article>
    </div>
  



<p class="wp-block-paragraph"></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/almanac/functions/t/translate/">translate()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


The CSS translate() function shifts an element from its default position on a two-dimensional plane. This way, we can reposition an element horizontally, vertically, or both.




.parent:hover .box {
  transform: translate(50px, 50%);
}
Hover over the box to see it move 50% of its width towards the left:
CodePen Embed Fallback
Along with other transform functions, it is used inside the transform property.
The translate() function is defined in the CSS Transforms Module Level 1 draft.
Syntax
The translate() function’s syntax looks like this:
<translate()> = translate( <length-percentage>, <length-percentage>? )
…which is just a fancy way of saying we can move (translate) and element by one or two lengths or percentages. We’ll get into some examples in a bit. But first:
Arguments
/* Single argument */
translate(100px) /* moves 100px to the right */
translate(-100%) /* moves 100% of the element's width to the left */

/* Double argument */
translate(50px, 100px) /* moves 50px down, then 100px to the right */
translate(50%, 100%) /* moves 50% of the element's width downwards, then 100% its height to the right */
The translate() function takes two <length-percentage> arguments (tx, ty, as in “translate horizontally” and “translate vertically”). These tell the browser how much to move the element and in which direction direction (whether it’s positive or negative).
tx: Specifies the displacement in the horizontal axis. If it’s positive, the element goes right. If it’s negative, the element shifts to the left.
ty (optional): Specifies the displacement in the vertical axis. If it’s positive, the element goes downward, and if it’s negative, the element moves upward.
If only one argument is passed, it’s assumed to be tx. Alternatively, when both arguments are passed, the second argument will be ty. Together, they shift the element diagonally.
You’ll also notice that we can use either <length> or <percentage> values. A <length> value is absolute, while a <percentage> value is relative to the element’s width (for tx) or height (for ty).
Basic usage
While we have many ways to center an element in CSS, for most of its history, our best shot to center an absolute element was using the translate() function.
The process goes as follows: given an absolute element, we usually shift it to the center using top: 50% and left: 50%. However, these alone only fix the top-left corner of the element in the center, not the element itself. To fix this, we use transform: translate(-50%, -50%) to shift the element back by half of its own width and height.
.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0.9);
}
More recently, we can do this using the known justify-self and align-self properties. Alternatively, we could have used the semantic dialog modal which is centered by default.
CodePen Embed Fallback
Diagonal movements
The translateX() function moves elements horizontally, while translateY() handles the vertical axis. If we instead want diagonal movement, we could combine both or use the shorter translate() function.
A common use case would be to translate an element into the page from any corner. For example, if we had a Toast component and wanted it to slide in from the bottom-right, we could move the element through the bottom and right properties, then offset them off the page with translate().
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;

  transform: translate(40px, 40px);
  transition: transform 0.28s ease;
}
Then, when a .show class is triggered, the translate() values are reset, causing them to slide in diagonally:
.toast.show {
  opacity: 1;
  transform: translate(0, 0);
}
CodePen Embed Fallback
It doesn’t affect other elements
The translate() 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: translate(80px, 40px);
}
Notice how the “translated” element does not cause the Box 1 or Box 2 elements next to it to shift when it is moved.
CodePen Embed Fallback
Unlike margin, which can trigger reflows or shift neighboring elements, translate() only changes where the element is visually rendered.
Issues with pointer pseudo-classes
Using translate() directly on a pointer pseudo-classes like :hover can sometimes make for bad interactions. In a situation where the element is translated far enough from the cursor, the :hover state ends, causing the element to snap back immediately to its original position. A position where the cursor still lingers, 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, while the main element takes the translate function.
/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}
CodePen Embed Fallback
Demo
CodePen Embed Fallback
Specification
The CSS translate() function is defined in the CSS Transforms Module Level 1, which is currently in Editor’s Drafts.
Browser support
The translate() function has baseline support on all modern browsers.




Further reading
rotate scale transform translate    
    
  
    
      Geoff Graham    
  
    
  
    
      Chris Coyier    
  
background background-position custom properties JavaScript    
    
  
    
      Chris Coyier    
  


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

The CSS translate() function shifts an element from its default position on a 2-dimensional plane
translate() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

translate()

<p class="wp-block-paragraph">Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page.</p>
<p>CodePen Embed Fallback</p>
<p class="is-style-explanation wp-block-paragraph"><strong>Note:</strong> This &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/scroll-driven-animations-opposing-scroll-directions/">Using Scroll-Driven Animations for Opposing Scroll Directions</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page.




CodePen Embed Fallback
Note: This demo respects reduced motion settings, so you’ll need to enable motion to see the effect. And we’re looking at Chrome and Safari support as I’m writing this.
It’s really not as hard as you might think, thanks to modern CSS features, specifically scroll-driven animations. Not only that, but it’s fun to make, too! Let me show you how I approached it — and maybe you will want to share how you would do it differently.
The HTML
The HTML consists of a parent element (.opposing-columns), its children (.opposing-column), and its children’s children (.opposing-item):
<div class="opposing-columns">
  
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
  
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
  
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
</div>
This is all we need in the markup. CSS will do the rest!
Styling the parent container
First off, we’re going to set things up so that this effect only applies to larger screens — there’s no real sense in supporting something like this on smaller screens because we need the additional space for the effect.
/* Just on larger screens */
@media screen and (width >= 50rem) {
  .opposing-columns {
    display: flex;
    gap: 2rem;
    max-inline-size: min(90dvi, 50rem);
    margin-inline: auto;
  }
}
Setting up a “masking” effect
We need to do a few more things with the parent container to get the illusion that items in each .opposing-column are disappearing as they scroll past it. The items in the outer columns move upward on scroll, and items in the center column move downward. As they cross the parents’ boundaries, we want them to sorta fade out.




So, we’re going to do a few things. First, we’ll set a background color variable on the document as a whole:
@media screen and (width >= 50rem) {
  :root {
    --opposing-bg: lightcyan;
    background-color: var(--opposing-bg);
  }
  
  .opposing-columns {
    /* same styles as before */
  }
}
Second, we’ll apply that same background color on the parent’s :before and :after pseudo-elements:
@media screen and (width >= 50rem) {
  :root {
    --opposing-bg: lightcyan;
    background-color: var(--opposing-bg);
  }
  
  .opposing-columns {
    /* same styles as before */
  
    &:before,
    &:after {
      content: "";
      position: absolute;
      inset-inline: 0;
      block-size: calc(var(--opposing-mask) * 3);
      pointer-events: none;
      z-index: 1;
    }
  }
}
Notice that we’ve established a stacking context on the pseudos and set them one layer above the parent and its descendants. This is key for masking the items in each column as they scroll in and out of the container. The items are technically sliding under the pseudo masks.
Speaking of which, let’s create another variable called --opposing-mask that adds vertical space between the parent element and the three columns:
@media screen and (width >= 50rem) {
  :root {
    --opposing-bg: lightcyan;
    --opposing-mask: 3rem;
    background-color: var(--opposing-bg);
  }
  
  .opposing-columns {
    display: flex;
    gap: 2rem;
    max-inline-size: min(90dvi, 50rem);
    margin-inline: auto;
    margin-block: var(--opposing-mask, 3rem);
    position: relative;
  }
}




Let’s do the same thing to the parents’ pseudos, only applying --opposing-mask to their block-size by a multiple of three. This way, there’s additional vertical space between them and the parent.
@media screen and (width >= 50rem) {
  :root {
    --opposing-bg: lightcyan;
    --opposing-mask: 3rem;
    background-color: var(--opposing-bg);
  }

  .opposing-columns {
    /* same styles as before */
  
    &:before,
    &:after {
      content: "";
      position: absolute;
      inset-inline: 0;
      block-size: calc(var(--opposing-mask) * 3);
      pointer-events: none;
      z-index: 1;
    }
  }
}




You might see where this is going. We have a nice amount of space between the parent container and its pseudos. We want the column items to appear as if they are fading out as they scroll out of the parent container. We don’t have to mess with their opacity or anything like that. Instead, we can add background gradients on the pseudos.
The :before pseudo is at the top of the container, so we’ll give it a gradient that goes from a solid color that matches the document’s underlying background color to transparent, top-to-bottom. And since the :after pseudo sits at the bottom of the parent container, we’ll reverse the gradient so it goes transparent to the document’s background color, bottom-to-top.
@media screen and (width >= 50rem) {
  :root {
    /* same styles as before */
  }
  
  .opposing-columns {
      /* same styles as before */
    
      &:before,
      &:after {
        /* same styles as before */
      }
      
      &:before {
        background-image: linear-gradient(
          to bottom,
          var(--opposing-bg) var(--opposing-mask),
          transparent
        );
        inset-block-start: calc(var(--opposing-mask) * -1);
      }

      &:after {
        background-image: linear-gradient(
          to top,
          var(--opposing-bg) var(--opposing-mask),
          transparent
        );
        inset-block-end: calc(var(--opposing-mask) * -1);
      }
    }
  }
}
The column layouts
Before we get to the magic, we ought to lay out the items in each column. Each column is a flex item inside the parent, which is a flex container. We’ll let them shrink (flex-shrink: 1) and grow (flex-grow: 1), capping the size at a certain point (flex-basis: 10rem).
We can define all that with the flex shorthand property:
@media screen and (width >= 50rem) {
  /* same styles as before */

  .opposing-column {
    flex: 1 1 10rem;
  }
}
Now I want those columns to be grid containers so I can use the gap property to insert space between items:
@media screen and (width >= 50rem) {
  /* same styles as before */

  .opposing-column {
    flex: 1 1 10rem;
    display: grid;
    gap: 2rem;
  }
}
We totally could have used Flexbox here as well to get access to gap, but the default layout is set to row and we’d have to override that to column. Grid is a little more concise in this situation.
The animation!
This is what you came for, right? We’ve set everything up so that column items can flow in and out of the parent container on scroll. Now we need to add that scrolling behavior.
This is where the animation-timeline property comes real handy. Normally, a CSS animation just runs on its own. It starts when the page loads (or after a specific delay you set) and ends after however long you set the duration. With animation-timeline, we tell the animation to run based on its scroll position… hence the term “scroll-driven” animation.
We have two supported functions here, scroll() and view(). They’re related but super different in that scroll() runs the animation based on an element’s scroll position. The view() function is similar, but tracks the element’s progress as it enters and exits the scrollport (i.e., the scrollable area of the container it is in).
We’re going with the view() function because we’ve set this up where there is a clear scrollable area inside the parent container. We need to run the animation based on where it enters and exits that area rather than the scroll position of the column items.
This is real interesting because we can tell view() where exactly we want the animation to start once it enters the scrollable area and where to stop once it exits that same area. Like this:
/* Official syntax */
animation-timeline:  view([ <axis> || <'view-timeline-inset'>]?);
Let’s start by defining the axes:
@media screen and (width >= 50rem) {
  /* same styles as before */

  .opposing-column {
    /* ... */
    animation-timeline: view();
    animation-range: entry cover;
  }
}
This is just partially what we want, but what we’re saying is we want the animation to (1) start the very moment is enters the scrollport (entry), and (2) end when it completely leaves the area (cover). We need to be explicitly about the insets because that’s what establishes the animation’s range relative to where it enters and exits. We want the full range, so the entry begins at 0% and the exit is when an item is covered at 100%.
@media screen and (width >= 50rem) {
  /* same styles as before */

  .opposing-column {
    /* ... */
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
}
Lastly, we’ll set the animation to run linearly — no need for the items to slow up or down as they scroll.
@media screen and (width >= 50rem) {
  /* same styles as before */

  .opposing-column {
    /* ... */
    animation-timing-function: linear;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
}
OK, great. But what we haven’t done is create an animation. We’ve set up what we want it to do when it runs, but we need to define the actual movement.
I want to set up three separate CSS animations:
One that translates (moves) the items upward in the first column.
One that’s the reverse of the first animation for the items in the other column.
We could technically set the first animation on both of the outer columns, but I want a third one that is a little bit offset from the first so those columns appear staggered.
@keyframes scroll1 {
  from { transform: translateY(var(--opposing-mask)); }
  to { transform: translateY(calc(var(--opposing-mask) * -1)); }
}

@keyframes scroll2 {
  from { transform: translateY(calc(var(--opposing-mask) * -1)); }
  to { transform: translateY(var(--opposing-mask)); }
}

@keyframes scroll3 {
  from { transform: translateY(calc(var(--opposing-mask) * .66)); }
  to { transform: translateY(calc(var(--opposing-mask) * -.33)); }
}
We can create variables for these, of course, should we ever need to update them:
@media screen and (width >= 50rem) {
  :root {
    --opposing-bg: lightcyan;
    --opposing-mask: 3rem;
    --animation-1: scroll1;
    --animation-2: scroll2;
    --animation-3: scroll3;

    /* ... */
  }
}
…and apply them to each column:
@media screen and (width >= 50rem) {
  /* same styles as before */

  .opposing-column {
    /* same styles as before */
  }

  :where(.opposing-column:nth-of-type(1)) {
    animation-name: var(--animation-1);
  }
  
  :where(.opposing-column:nth-of-type(2)) {
    animation-name: var(--animation-2);
  }

  :where(.opposing-column:nth-of-type(3)) {
    animation-name: var(--animation-3);
  }
}
While we’re at it, we should disable the animations to respect the user’s settings for reduced motion (and remove the mask, otherwise it might look weird):
@media (prefers-reduced-motion: reduce) { 
  .opposing-column {
    animation: unset;

    &:before,
    &:after {
      content: unset;
    }
  }
}
Wrapping up
So yeah, scroll-driven animations are really, really cool. We’re still waiting for Firefox support as I’m writing this, but you can certainly wrap this in @supports to provide a default experience that uses thew scroll annotations and then set a fallback experience for non-supporting browsers, like running on a normal animation timeline:
@supports (animation-timeline: view()) {
  /* ... */
}
This is just toe-dipping into what scroll-driven animations can do, of course. What sort of things have you made or experimented with? Or would you approach this one differently? Let me know!
Using Scroll-Driven Animations for Opposing Scroll Directions originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page.
CodePen Embed Fallback
Note: This …
Using Scroll-Driven Animations for Opposing Scroll Directions originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Using Scroll-Driven Animations for Opposing Scroll Directions

<p>Let's poke at the differences between scroll-<em>driven</em> and scroll-<em>triggered</em> animations.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-scroll-triggered-animations-first-look/">A First Look at Scroll-Triggered Animations</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Chrome has shipped scroll-triggered animations, and is the first browser to do so. If you update to Chrome 146, you can view the demo below, where the background of a square fades in over the duration of 300ms, but only once the whole element is within the viewport.




CodePen Embed Fallback




This is a bit different to how scroll-driven animations work, so in this article I’ll compare them, and then show you how scroll-triggered animations work.
Scroll-triggered animations vs. scroll-driven animations
Scroll-triggered animations play for a fixed duration once a certain scroll threshold has been surpassed. (Think JavaScript’s Intersection Observer API but for CSS animations.)
This differs from scroll-driven animations, where animation progression is synchronized with scroll progression (animation-timeline: scroll()) or the degree of intersection (animation-timeline: view()), and thus has no duration.
Basic scroll-triggered animation example
The key part is timeline-trigger: view() instead of animation-timeline: view(), which waits for the element to be within the threshold instead of measuring how much it’s within it and doing something accordingly. However, let’s start with the actual @keyframes animation, which sets the background:
/* Define the animation */
@keyframes fade-bg-in {
  to {
    background: currentColor;
  }
}
It’s set on the .square over the duration of 300ms:
.square {
  /* Declare animation */
  animation: fade-bg-in 300ms;
}
By default, CSS animations trigger when the declaration is applied, but in the expanded snippet below, timeline-trigger overwrites that behavior. Now the animation triggers when the element comes into view(). The --trigger is simply a dashed ident that acts as an identifier for the trigger, whereas entry 100% exit 0% is a timeline range. A timeline range specifies the scroll zone in which the animation activates and is allowed to remain active.
In this case, the animation triggers when the bottom edge of the .square enters the (entry 100%) and untriggers (assuming that it’s still running) when the top edge exits the scrollport (exit 0%). For clarity, entry 0% would trigger the animation when the top edge enters. entry handles the element coming in from the bottom of the scrollport, whereas exit handles it leaving through the top. It’s a bit confusing, but it’s easier to understand if I don’t over-explain it.
.square {
  /* Declare animation */
  animation: fade-bg-in 300ms;

  /* Animation trigger conditions */
  timeline-trigger: --trigger view() entry 100% exit 0%;
}
For animation-trigger, we first specify which trigger we’re talking about, and then we declare some settings (e.g., play-forwards):
.square {
  /* Declare animation */
  animation: fade-bg-in 300ms;

  /* Animation trigger conditions */
  timeline-trigger: --trigger view() entry 100% exit 0%;

  /* Animation trigger settings */
  animation-trigger: --trigger play-forwards;
}
CodePen Embed Fallback




The play-forwards keyword triggers the animation whenever the square becomes completely visible, and since we haven’t declared a fill mode for the animation (using animation-fill-mode or as part of the animation shorthand), which means that the square won’t retain the background after, the animation is more of a flash.
So, we need to build upon this to achieve different results.
animation-fill-mode vs. <animation-action>
First, a recap of what the different fill mode values do for animation-fill-mode or as part of the animation shorthand:
forwards: the styles are retained after the animation.
backwards: the styles are applied before the animation.
both: both behaviors are applied.
Now, let’s assume that the <animation-action> is play-forwards (like before) and the fill mode is forwards (both would be redundant because background isn’t even set to begin with):
.square {
  animation: fade-bg-in 300ms forwards;
  timeline-trigger: --trigger view() entry 100% exit 0%;
  animation-trigger: --trigger play-forwards;
}
CodePen Embed Fallback




This causes the styles to be retained, but, if the square partially or completely exits the viewport and then reenters it, the animation restarts, which can cause a flash depending on how the animation ends, which is what happens in this instance.
There are two different ways to solve this…
The “lock-in” method: Use play-once instead of play-forwards, which, when combined with forwards, results in the animation playing once, never to restart, and then retaining the styles afterward.
.square {
  /* Play once */
  animation-trigger: --trigger play-once;

  /* Retain the styles */
  animation: fade-bg-in 300ms forwards;

  timeline-trigger: --trigger view() entry 100% exit 0%;
}
CodePen Embed Fallback




The “back-and-forth” method: play-forwards play-backwards animates the element normally when fully visible and in reverse when no longer fully visible. There’s no flash because the element animates backward as smoothly as it animates forward. In addition, even though the direction of the animation can change, the fill mode can remain at forwards instead of being set to both.
Why?
play-forwards means “play the animation from 0% to 100%” whereas play-backwards means “play the animation from 100% to 0%.” Meanwhile, as I mentioned earlier, the forwards fill mode means “retain the styles when the animation completes’”— well, this is regardless of whether the final keyframe is 0% or 100%.
.square {
  /* Play forward and backward, as appropriate */
  animation-trigger: --trigger play-forwards play-backwards;

  /* Retain the styles either way */
  animation: fade-bg-in 300ms forwards;

  timeline-trigger: --trigger view() entry 100% exit 0%;
}
CodePen Embed Fallback




play-forwards, play-once, and play-backwards aren’t the only keywords for <animation-action>. Here’s a quick rundown:

<animation-action>Effect

noneFor disabling triggers conditionally, on entry but not exit (or vice-versa), or handling multiple triggers with one animation-trigger
play-forwardsAllows the animation to play forward
play-backwardsAllows the animation to play backward
play-onceForward or backward (whichever comes first)
playPlays in the last specified direction, or forward if neither has been specified
pausePauses the animation
resetPauses the animation and sets progress to 0
replaySets progress to 0 but doesn’t pause the animation





These <animation-action>s not only allow for a significant amount of control over animations while scrolling, but different combinations of actions, fill modes, timeline ranges, and the fact that we can bake exit animations into @keyframes rules means that there are often multiple ways to achieve an outcome.
Scroll-triggering multiple elements
While scroll-triggered animations being made up of animation actions, fill modes, timeline ranges, and maybe more, might seem overcomplicated, the fact that these mechanics are decoupled enable us to reuse logic while maintaining flexibility, reducing repetition and making the mechanics more design system-friendly.
Consider three squares this time, and for a bit of added complexity, we declare scale: 70% (animates to initial) and define two rotative animations.
<div id="squares">
  <div class="square rotate-left"></div>
  <div class="square"></div>
  <div class="square rotate-right"></div>
</div>
/* Define animations */
@keyframes intensify {
  to {
    scale: initial;
    background: currentColor;
  }
}

@keyframes rotate-left {
  to {
    rotate: -5deg;
  }
}

@keyframes rotate-right {
  to {
    rotate: 5deg;
  }
}

.square {
  /* Set starting value */
  scale: 70%;
}
After that it’s more of the same, and while it’s obviously a more complex example, being able to merge values into shorthand properties and decouple them into longhand properties, as well as the decoupled nature of the different mechanics, facilitates flexibility but also reusability (in this case, to stagger various animations using the same animation trigger settings):
.square {
  /* Set starting value */
  scale: 70%;

  /* Define animation name */
  --base-animation: intensify;

  /* Declare animation */
  animation: var(--base-animation) 300ms forwards;

  /* Define animation trigger settings */
  --animation-trigger: --trigger play-forwards play-backwards;

  /* Declare for intensify, then for one of either rotate animations */
  animation-trigger: var(--animation-trigger), var(--animation-trigger);

  /* Declare animation trigger conditions (without timeline ranges) */
  timeline-trigger: --trigger view();

  /* Declare active range end */
  timeline-trigger-active-range-end: normal;

  /* Append other animations */
  &.rotate-left {
    animation-name: var(--base-animation), rotate-left;
  }

  &.rotate-right {
    animation-name: var(--base-animation), rotate-right;
  }

  /* Stagger activation ranges */
  &:first-child {
    timeline-trigger-activation-range-start: entry 33.3333%;
  }

  &:nth-child(2) {
    timeline-trigger-activation-range-start: entry 66.6666%;
  }

  &:last-child {
    timeline-trigger-activation-range-start: entry 99.9999%;
  }
}
CodePen Embed Fallback




Here’s a cleaner, more robust version that uses sibling-count() and sibling-index() (which lack Firefox support) to stagger the animations:
CodePen Embed Fallback
In this version, instead of setting timeline-trigger-activation-range-start on each individual square, we simply target .square and calculate the entry values on the fly:
/* Maximum entry ÷ number of squares */
--stagger-interval: calc(100% / sibling-count());

/* Current square’s index × stagger interval */
--entry: calc(sibling-index() * var(--stagger-interval));

/* Declare animation trigger conditions */
timeline-trigger: --trigger view() entry var(--entry) exit 0%;
Making one element trigger other elements
In this case, we’ll shift the trigger and its ranges to the first square, and have the other squares follow according to a staggered animation delay. As you can see, all animations are triggered by animation-trigger once 50% of the first square has entered (entry 50%) the viewport (view()). animation-trigger is triggered by timeline-trigger because the dashed ident (the aptly named --trigger) links them:
/* Define animations */
@keyframes intensify {
  to {
    scale: initial;
    background: currentColor;
  }
}

@keyframes rotate-left {
  to {
    rotate: -5deg;
  }
}

@keyframes rotate-right {
  to {
    rotate: 5deg;
  }
}

.square {
  /* Set starting value */
  scale: 70%;

  /* Define animation name */
  --base-animation: intensify;

  /* Maximum delay ÷ number of squares */
  --stagger-interval: calc(300ms / sibling-count());

  /* Current square’s index × stagger interval */
  --animation-delay: calc(sibling-index() * var(--stagger-interval));

  /* Declare animation */
  animation: var(--base-animation) 300ms var(--animation-delay) forwards;

  /* Define animation trigger settings */
  --animation-trigger: --trigger play-forwards play-backwards;

  /* Declare for intensify, then for one of either rotate animations */
  animation-trigger: var(--animation-trigger), var(--animation-trigger);

  &:first-child {
    /* Declare animation trigger conditions */
    timeline-trigger: --trigger view() entry 50%;

    /* Declare active range end */
    timeline-trigger-active-range-end: normal;
  }

  /* Append other animations */
  &.rotate-left {
    animation-name: var(--base-animation), rotate-left;
  }

  &.rotate-right {
    animation-name: var(--base-animation), rotate-right;
  }
}
CodePen Embed Fallback




One downside is that when animation-trigger is in play-backwards mode, the animations don’t stagger. This is because, I think, when the animation is reversed, the delay is included in that. This seems like an oversight to me, especially as that isn’t the case with animation-direction: reverse, but I could be completely wrong on this.
Understanding timeline ranges
Timeline ranges are a big part of scroll-triggered animations, but they’re a separate mechanic. For scroll-driven animations, you’ll want animation-range and its longhand properties. With scroll-triggered animations, the syntax is fundamentally the same but uses different properties and two different ranges. The activation range determines the scroll zone in which the animation triggers, while the active range determines the zone in which it holds up (even if not in the activation range anymore).
Timeline ranges are a bit heavy. However, view() entry 100% exit 0% (when fully visible) and view() contain (the same but also if larger than the viewport) will suffice most of the time.
But if you’re keen to dive in, animation-range, although it’s for scroll-driven animations, is lighter and offers a novice-level understanding of timeline ranges. After that, I recommend reading the Animation Triggers spec to cover the many intricacies of timeline ranges within the context of these scroll-triggered animations.
Another ingredient of scroll-triggered animations that’s also its own thing is the view() function, but this one’s easier to summarize here. Basically, when it comes to scroll-triggered animations, view() is the viewport. So if you had a 5rem sticky header, view(y 0 5rem) would make the timeline range factor that in along the y-axis.
Final thoughts
Scroll-triggered animations can be tricky because they’re similar to scroll-driven animations, they leverage older CSS features (mainly animation) as well as mechanics from other newer features (dashed idents, view(), timeline ranges), in addition to the CSS properties that are specific to scroll-triggered animations. There’s a whole lot happening at once.
I’m not sure how I feel about them, to be honest. They’re definitely cool, fun, and useful, but they’re also complicated, and it’ll be a while before I really start to rave about them.


A First Look at Scroll-Triggered Animations originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Let's poke at the differences between scroll-driven and scroll-triggered animations.
A First Look at Scroll-Triggered Animations originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

A First Look at Scroll-Triggered Animations

<p>There's a brand new <code>ariaNotify()</code> method — defined by the WAI-ARIA 1.3 Specification — that provides a means of programmatically triggering narration in a screen reader.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/the-siren-song-of-arianotify/">The Siren Song of ariaNotify()</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


I need you all to promise me you’ll be cool about this. I‘m here to tell you about an upcoming web platform feature that has been a long time coming; a feature that not only fulfills a use case sorely overdue for a better solution, but does so by way of a syntax that is both immediately understandable and deceptively powerful. That’s right, this thing is developer catnip, and I don’t mind saying that I was really excited to try it out — after which point I willed myself to tuck it away in a drawer and put it out of my mind. This is a tool only to be used in situations where it is absolutely, one hundred percent necessary, to solve a problem that cannot be solved in any other way, up to and including “push back against building a feature in the first place.” So just be cool about this, okay? Okay.




There’s a brand new ariaNotify() method — defined by the Accessible Rich Internet Applications (WAI-ARIA) 1.3 Specification — that provides you with a means of programmatically triggering narration in a screen reader. It accepts a string as its first argument, and an optional configuration object as its second:
document.ariaNotify( "Hello, World." );
// When invoked, a screen reader will narrate "Hello, World."
That might look like a simple solution to an equally simple use case here in print, but historically this has a tricky problem that could only be solved by slightly off-label usage of ARIA’s live regions. That means that understanding live regions — and their shortcomings — is the key to understanding what ariaNotify does for us. If you’ve worked with live regions before, you likely closed this tab right after that code snippet, and you’re currently on your third or fourth lap around the room with your arms held aloft in triumph. If you haven’t worked with live regions before, well, to put it in the strictest possible technical terms: woof what a mess.
In an assisted browsing context, if some part of a page changes in response to a user interaction, or something is loaded and added to the page asynchronously, those changes aren’t discoverable until the user moved their focus to that changed content — a user would have no way of knowing that something had changed, let alone what. Live regions address that, at least by design: an element with an aria-live attribute will prompt narration for changes to the markup contained within that element — when the markup is changed, the changed markup is narrated aloud. If aria-live has a value of assertive, it informs assistive technology “this is urgent, and should be narrated right away.” If aria-live has a value of polite, it says “this should be narrated, at the next natural opportunity to do so.” Using role="alert" or role="status" on an element is functionally equivalent to aria-live="assertive" and aria-live="polite", respectively. Sounds pretty reasonable on paper, right?
Naturally, we needed a way to fine-tune exactly what information is narrated and how, so there are a few other attributes that determine a live region’s behavior:
aria-atomic
true: narrate the entire contents of the live region when something in it changes
false (default): announce only the text that changes within the element
aria-relevant
text: notify the user when phrasing content — text, just like it says on the tin — changes inside the live region
additions: notify the user when a node is added to the live region
removals: notify the user when a node is removed from the live region
all: notify the user if text is changed, and/or elements are added to or removed from the DOM
Again, solid enough in theory! Problem solved, right up until the point where you try to use live regions, for pretty much anything, ever. In practice, browsers and assistive technologies are wildly inconsistent about implementation, particularly as it relates to nested markup within a live region — if you want aria-live to work as expected, you’ll often end up needing to strip out all the otherwise semantically-meaningful markup that you should be using. In order to work reliably across assisted browsing contexts, a live region has to already meaningfully exist in the DOM at the time the narration is triggered. A live region can’t be toggled from display: none or injected into the page along with the content to be narrated or you’ll run into timing issues that prevent the content from being narrated — when the browser first “sees” the live region, it locks in “okay, narrate anything that changes in this container,” which doesn’t necessarily include that initial content. The way the "assertive" and "polite" values work isn’t especially well-defined in the specification or realized across screen readers and browser combinations, either. Again: they’re a mess.
Even if all that weren’t the case, there’s a fundamental mismatch between the purpose of live regions and the way the modern web is built. Like I said, live regions only work when markup is added to/removed from the element in question, and that isn’t the reality of most interactions that result in a change to the visible contents of a page. Live regions are no help when you’re revealing markup that’s already in the document, but otherwise inert — for example, swapping between a visible display property and display: none. That use case is every bit as common as structural changes to the current document on-the-fly, if not more so.
All these limitations have led to live regions almost exclusively being used as makeshift notification APIs: having one or more aria-live elements buried in the page, visually hidden (but not removed from the accessibility tree via display: none), that you update as-needed with whatever text you want narrated. I have been there and done this, and it’s clunky, not least of all because of how inconsistent live regions are at their core. That injected content is also necessarily available to a user navigating through the page via assistive tech, just floating in the document divorced from it’s original meaning — if you’re not meticulous about cleaning up afterwards, you’ve added a potentially confusing source of contextually-irrelevant narration to the page. Most of all, though, you’ve added a new and invisible concern; a feature that will need dedicated testing and upkeep, and something that can break in very literally unseen ways, and do so in ways that have the potential to be annoying, misleading, confusing, or all of the above. That’s what gets you, with accessibility work: quick-and-easy decisions made in isolation can have unforeseen consequences in the context of the overall experience, and unless those assumptions are tested very carefully — early and often — we can’t know what those consequences might be.
The ariaNotify method takes the place of this kind of Rube Goldberg accessibility contraption, providing you with a real screen reader notification API, no convoluted (and flaky) markup required:
document.ariaNotify( "Hello, World." );
ariaNotify is available as a method on the Element interface or on the Document interface — there’s no meaningful difference between the two for the examples you’re going to see here, but it’s worth knowing that calling document.ariaNotify() means that the lang attribute specified on the html element, specifically, will be used to infer the language of the notification:
const btn = document.querySelector( "button.announce" );

btn.addEventListener("click", function( e ) {
  document.ariaNotify( "Hello, World." );
});
/*
* Clicking the button results in the "polite"-timed announcement "hello, world," 
* using the `lang` attribute specified on the `<html>` element. If there isn't 
* one, the browser's default language is used.
/*
While calling ariaNotify() from an element means that the lang attribute of the element’s nearest ancestor will be used to determine the language of the notification:
const btn = document.querySelector( "button.announce" );

btn.addEventListener("click", function( e ) {
  this.ariaNotify( "Hello, World." );
});
/*
* Clicking the button results in the "polite"-timed announcement "hello, world," 
* using the `lang` attribute of the `button` (or the closest parent element with 
* `lang`) to  determine pronunciation. If there isn't one in the document (all
* the way up to and including `<html>`), the browser's default language is used.
/*
ariaNotify accepts a second parameter that allows you to set an explicit priority level:
const btn = document.querySelector( "button.announce" );

btn.addEventListener("click", function( e ){
  this.ariaNotify( "Hello, world.", {
    priority: "high"
  });
});
The default priority for these notifications is priority: "normal", which behaves like aria-live="polite" (or role="status"). Setting an explicit priority: "high" will prioritize and potentially interrupt the current narration, the way aria-live="assertive" (or role="alert") would.
That’s the entire API so far, right there. No fussing with markup, no finessing timings; if you need something narrated, you call ariaNotify and it is narrated, just like that. You can try this out in Firefox as we speak, though it doesn’t seem like lang attributes are factored in just yet:
CodePen Embed Fallback
JAWS
Polite, button. To activate, press space bar. [spacebar pressed] Space. Hello, World.
Assertive, button. To activate, press space bar. [spacebar pressed] Space. Hello, World.
Educado [pronounced correctly], button. To activate, press space bar. Space. Hola, Mundo [pronounced incorrectly].
NVDA
Polite, button. [spacebar pressed] Hello, World.
Assertive, button. [spacebar pressed] Hello, World.
Educado [pronounced correctly], button. [spacebar pressed] Hola, Mundo [pronounced incorrectly].
VoiceOver
Polite, button. You are currently on a button [spacebar pressed] inside of a frame. To click this button, press Control–Option–Space. To exit this web area, press Control–Option–Shift-Up Arrow. Hello, World.
Assertive, button. You are currently on a button [spacebar pressed] Hello, World.
Educado [pronounced correctly], button. You are currently on a button [spacebar pressed] inside of a frame. To click this button, press Control–Option–Space. To exit this web area, press Control–Option–Shift-Up Arrow. Hola, Mundo [pronounced incorrectly].
Pretty solid, huh? Huge improvement over how we’ve all been stuck using live regions. I, for one, can’t wait to almost use ariaNotify, then — again — promptly talk myself out of it!
Why the reluctance? Well, in accessibility circles, it is sometimes said that there are three stages of learning to use ARIA:
You don’t use ARIA.
You use ARIA.
You don’t use ARIA.
The W3C puts this in more formal terms, as is their specialty:
If you can use a native HTML element [HTML] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
—Using ARIA: First Rule of ARIA Use
That second stage of ARIA mastery is where we get ourselves into trouble. The web is a chaotic place, but assistive technologies have evolved alongside it, and they’ve learned to paper over some of the more common issues a user might encounter. For example, say you have an h2 that reveals some visually-hidden content that follows it when clicked — that element might be presented in a way that makes that interaction clear visually, but without our intervention, it might not otherwise be signaled to a user browsing via screen reader. To work around this, assistive technologies can helpfully narrate that heading element as “clickable” when it receives user focus upon finding a click event listener bound to that heading. Granted, that isn’t as good as explicitly signaling the purpose of this element to the user, but it is workable, even if we didn’t make that interaction explicit.
The catch is in how we that make that interaction explicit. If you‘re somewhat familiar with ARIA, you might find yourself thinking “well, this element behaves like a button, so I should put role="button" on it to inform a user that this does something.” That impulse isn’t strictly wrong, but with that attribute comes a likely unintended consequence: by being explicit about the element’s role, we remove its implicit meaning. You’re telling the browser and assistive technology, in no uncertain terms, that this is not a heading — so if the user is navigating by way of the document outline, this element will no longer be part of that navigation, and what felt like a simple, helpful quick-fix ends up having an unintended consequence. ARIA leaves no room for interpretation; what we say goes, full stop. We say “narrate this,” it gets narrated. Non-negotiable.
So, given a very easy-to-use feature that inarguably says “when I tell you to narrate this, you narrate it,” please assume that I am making steely, unblinking eye contact here while I say, aloud, “alert()” — an imagined scenario made all the more unsettling by the fact that I have somehow managed to say it in a monospaced font.
window.alert( "Hello world, like it or not." );
You remember alert() from way back in the day, right? A method as infamous as it is obnoxious. If you’re newer to the industry, you might not be familiar with it first-hand, for a blessing. Like ariaNotify, it was — is, technically — a quick and easy API for immediately presenting information to a user:




alert() is simple, effective, consistent, and — back when it saw widespread usage — incredibly annoying. ariaNotify() entrusts you with this same power, this time backed by the invisible, unyielding authority of ARIA. With ariaNotify() in your pocket, “this might be confusing, so I’ll narrate exactly what’s going on” will be a quick and easy decision, and might mean that a savvy user — already skilled at navigating the web despite all its inherent chaos and inconsistency — finds their browsing interrupted by a lecture about an interaction they already understand.
It isn’t hard to imagine a developer — their heart squarely in the right place — using ariaNotify to inform a user that content has been revealed by an interaction on the page. In context, however, revealing that content likely meant interacting with an element already narrated as “clickable” thanks to the presence of an associated event listener, the element’s inherent semantics, or the presence of an aria-expanded="false" attribute (the correct approach to signaling that interacting with an element will reveal associated content). In that case, all we’ve done is add noise to the user’s experience of the page, and nobody needs that. I mean, imagine being partway through reading this sentence when alert( "There's a new comment on this article!" ) interrupts you for the third time, or hovering over <button>Navigation</button> only to get hit with alert( "Click here to open the navigation." ) like some unskippable video game tutorial? Ugh. I’d close the tab.
Even worse, if a narrated instruction falls out of sync with the reality of the interaction itself — an invisible inconsistency that wouldn’t be caught by a QA process that lacks dedicated screen reader testing — we could end up making the user sit through an argument between the underlying page and their own screen reader while they’re just trying to get things done and get on with their day.
ARIA is powerful stuff. It gives us the ability to define the meanings, states, and relationships between elements on a page as absolute, iron-clad fact — it provides a line of communication between those of us building the web and those of us using it. Nowhere is that line of communication more direct than with ariaNotify(), a feature that effectively allows us to speak directly to an end user using the voice of the browser and assistive technology they know and trust. That’s a lot of responsibility bound up in a single method. It solves a very real problem, but like so many technologies: if not used carefully, it can cause just as many.
I am excited about ariaNotify(), y’know, in a measured, cautious way. It finally gives us a way to address a use case that has plagued the web — and me, personally — for years, in a shockingly easy way. So easy, in fact, that it makes ariaNotify() just a little bit dangerous.
I mean, not for us though, right? Because we’re all gonna be cool about this, right?
Right.
The Siren Song of ariaNotify() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

There's a brand new ariaNotify() method — defined by the WAI-ARIA 1.3 Specification — that provides a means of programmatically triggering narration in a screen reader.
The Siren Song of ariaNotify() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

The Siren Song of ariaNotify()

<p>Props for That creates live props based things CSS can't normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/prop-for-that/">Prop For That</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">No secret that Adam&#8217;s all about <em>props</em>. Dude gave us <a href="https://open-props.style" rel="noopener">Open Props</a> a good while back for a slew of preconfigured variables for color, shadows, sizing, typography, among much much more. Now he&#8217;s back with Prop For That, a similar sorta idea, but mind-blowing in the sense that it creates <em>live</em> props based things CSS can&#8217;t normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity — you know, the stuff that JavaScript sniffs and passes to CSS.</p>



<span id="more-395776"></span>



<p class="wp-block-paragraph">My understanding is that all the script-y stuff is already in the background. All that&#8217;s needed is to import the library, declare it in HTML, then style away in CSS.</p>



<p class="wp-block-paragraph">Like, here&#8217;s Chris a long while back with <a href="https://css-tricks.com/updating-a-css-variable-with-javascript/">custom properties registered in JavaScript to track cursor position</a>:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_yxVQJG" src="//codepen.io/anon/embed/yxVQJG?height=450&amp;theme-id=1&amp;slug-hash=yxVQJG&amp;default-tab=css,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed yxVQJG" title="CodePen Embed yxVQJG" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph"><a href="https://prop-for-that.netlify.app/#:~:text=Track%20the%20pointer" rel="noopener">Prop For That has that nicely covered.</a> The difference is that we&#8217;re working with data attributes that trigger <a href="https://github.com/argyleink/prop-for-that/blob/main/src/plugins/pointer-local.ts" rel="noopener">the scripts</a>:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="mover" data-props-for="pointer">...&lt;/div></code></pre>



<p class="wp-block-paragraph">And plop the relevant props into the styles:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.mover {
  aspect-ratio: 1;
  width: 50px;
  background: red;
  position: absolute;
  left: calc(var(--live-pointer-x, 0) * 1px);
  top: calc(var(--live-pointer-y, 0) * 1px);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_019ed129-e979-7188-a4f1-7ee214e57365" src="//codepen.io/editor/anon/embed/019ed129-e979-7188-a4f1-7ee214e57365?height=450&amp;theme-id=1&amp;slug-hash=019ed129-e979-7188-a4f1-7ee214e57365&amp;default-tab=css,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed 019ed129-e979-7188-a4f1-7ee214e57365" title="CodePen Embed 019ed129-e979-7188-a4f1-7ee214e57365" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph"><a href="https://prop-for-that.netlify.app/docsite/demos/pointer/" rel="noopener">The demos are where it&#8217;s at.</a> Good lord, can Adam put together some classy work.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/prop-for-that/">Prop For That</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


No secret that Adam’s all about props. Dude gave us Open Props a good while back for a slew of preconfigured variables for color, shadows, sizing, typography, among much much more. Now he’s back with Prop For That, a similar sorta idea, but mind-blowing in the sense that it creates live props based things CSS can’t normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity — you know, the stuff that JavaScript sniffs and passes to CSS.




My understanding is that all the script-y stuff is already in the background. All that’s needed is to import the library, declare it in HTML, then style away in CSS.
Like, here’s Chris a long while back with custom properties registered in JavaScript to track cursor position:
CodePen Embed Fallback
Prop For That has that nicely covered. The difference is that we’re working with data attributes that trigger the scripts:
<div class="mover" data-props-for="pointer">...</div>
And plop the relevant props into the styles:
.mover {
  aspect-ratio: 1;
  width: 50px;
  background: red;
  position: absolute;
  left: calc(var(--live-pointer-x, 0) * 1px);
  top: calc(var(--live-pointer-y, 0) * 1px);
}
CodePen Embed Fallback
The demos are where it’s at. Good lord, can Adam put together some classy work.
Prop For That originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Props for That creates live props based things CSS can't normally see in the browser. Things like cursor position, progress values, certain form states, current time, scroll velocity.
Prop For That originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Prop For That

<p>CSS functions, the alpha() function, Grid Lanes, some things about Dialog that you might not know, CSS Wordle, and more — this is What’s !important right now.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-13/">What’s !important #13: @function, alpha(), CSS Wordle, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">CSS functions, the <code>alpha()</code> function, Grid Lanes, some things about <code>&lt;dialog&gt;</code> that you might not know, CSS Wordle, and more — this is <strong>What’s !important</strong> right now.</p>



<span id="more-395752"></span>



<h2 id="css-functions-expertly-explained" class="wp-block-heading">CSS functions, expertly explained</h2>



<p class="wp-block-paragraph">Jane Ori expertly explained <a href="https://frontendmasters.com/blog/the-fundamentals-and-dev-experience-of-css-function/" rel="noopener">how CSS functions work</a>. <code>@function</code> will <em>probably</em> be the biggest CSS feature to <em>probably</em> become Baseline this year, so I definitely found it a bit intimidating at first. That is, until I read Jane’s baby-step-by-baby-step walkthrough, which eases you into it really well.</p>



<p class="wp-block-paragraph">In addition, <a href="https://css-tricks.com/author/declanchidlow/">Declan Chidlow</a> wrote our <a href="https://css-tricks.com/almanac/rules/f/function/"><code>@function</code> documentation</a>, which you might want to bookmark for quick reference in the future.</p>



<h2 id="the-alpha-function" class="wp-block-heading">The <code>alpha()</code> function</h2>



<p class="wp-block-paragraph">Speaking of functions, the <code>alpha()</code> function caught me by surprise. Firstly, because I hadn’t heard of it, and secondly, because…<em>why?</em> We can already change the alpha channel:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* This */
color: alpha(from var(--color) / 0.5);

/* Instead of this */
color: oklch(from var(--color) l c h / 0.5);</code></pre>



<p class="wp-block-paragraph">Well, <a href="https://github.com/mozilla/standards-positions/issues/1396#issuecomment-4363280736" rel="noopener">this comment</a> from Jason Leo sums it up. Firstly, it means that we won’t need to hard-code color values when we already have CSS variables. For years I’ve circumvented this by only storing the actual values in CSS variables, but having to wrap them in the color function every single time is <em>really</em> monotonous:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Just the values */
--color: 0.65 0.23 230;

/* Then use them flexibly */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);</code></pre>



<p class="wp-block-paragraph">But it’s better than this (in my opinion):</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Function and values */
--color: oklch(0.65 0.23 230);

/* Delightful */
color: var(--color);

/* Delightless */
color: oklch(from var(--color) l c h / 0.5);</code></pre>



<p class="wp-block-paragraph"><code>alpha()</code> offers the best of both worlds:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Less delightless */
color: alpha(from var(--color) / 0.5);</code></pre>



<p class="wp-block-paragraph">Secondly, the color format is actually irrelevant in this context, so <code>alpha(from var(--color) / 0.5)</code> communicates the intention more clearly than <code>oklch(from var(--color) l c h / 0.5)</code> does. It also makes the declaration inherently shorter.</p>



<p class="wp-block-paragraph">Credit to Adam Argyle for <a href="https://nerdy.dev/relative-alpha" rel="noopener">bringing <code>alpha()</code> up</a>.</p>



<h2 id="the-field-guide-to-grid-lanes" class="wp-block-heading">The Field Guide to Grid Lanes</h2>



<p class="wp-block-paragraph">WebKit launched the <a href="https://gridlanes.webkit.org/" rel="noopener">Field Guide to Grid Lanes</a> (formerly known as CSS masonry layout). If you’ve ever read one of our <a href="https://css-tricks.com/guides/">CSS-Tricks Guides</a>, it’s similar to that (<em><a href="https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/" rel="noopener">their words</a> — just sayin’</em>). It’s a smooth introduction with a variety of barebones and real-world demos.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2560" height="1539" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?resize=2560%2C1539&#038;ssl=1" alt="Six CSS Grid Lanes demos organized in a three-by-two grid — Photos, Recipes, Newspaper, Mega Menu, Timeline, and Pinboard." class="wp-image-395754" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?w=2560&amp;ssl=1 2560w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?resize=300%2C180&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?resize=1024%2C616&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?resize=768%2C462&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?resize=1536%2C923&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/1-scaled.png?resize=2048%2C1231&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">Source: <a href="https://gridlanes.webkit.org/" rel="noopener">WebKit</a>.</figcaption></figure>



<h2 id="qualityoflife-upgrades-for-ltdialoggt" class="wp-block-heading">Quality-of-life upgrades for <code>&lt;dialog&gt;</code></h2>



<p class="wp-block-paragraph">Una Kravets talked about two <a href="https://bsky.app/profile/una.im/post/3mnf4c2gb5s2m" rel="noopener">quality-of-life upgrades for <code>&lt;dialog&gt;</code></a> — the new <code>closedby</code> attribute, which isn’t supported by Safari yet, and <code>overscroll-behavior: contain</code>. There are some nuggets in the comments too, including a tip about <code>scrollbar-gutter: stable</code>.</p>



<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:kesmfbtx2loscqj7ktw5shtt/app.bsky.feed.post/3mnf4c2gb5s2m" data-bluesky-cid="bafyreigfkns6s2pockz4ufa5drxw3d2l26i5qcyhjbqzmb2yyxsxlfl67i" data-bluesky-embed-color-mode="system"><p lang="en">&#x2705; Nice lil btn scale-down 
&#x1f648; Layout change bc the scroll bar disappears
&#x1f648; No light dismiss

These UX problems can easily be solved with:

&#8211; closedby=&quot;any&quot;
&#8211; overscroll-behavior: contain<br><br><a href="https://bsky.app/profile/did:plc:kesmfbtx2loscqj7ktw5shtt/post/3mnf4c2gb5s2m?ref_src=embed" rel="noopener">[image or embed]</a></p>&mdash; Una Kravets (<a href="https://bsky.app/profile/did:plc:kesmfbtx2loscqj7ktw5shtt?ref_src=embed" rel="noopener">@una.im</a>) <a href="https://bsky.app/profile/did:plc:kesmfbtx2loscqj7ktw5shtt/post/3mnf4c2gb5s2m?ref_src=embed" rel="noopener">13:28 · Jun 3, 2026</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>



<p class="wp-block-paragraph">Also, Chris Coyier showed us <a href="https://frontendmasters.com/blog/in-n-out-animations-dialogs-part-1-3/" rel="noopener">how to animate <code>&lt;dialog&gt;</code>s</a>, which I think many of us know how to do already, but it’s so easy to mess up. I have to Google it every time (it’s those bleeping <code>@starting-style</code>s).</p>



<h2 id="what-happened-at-css-day-2026" class="wp-block-heading">What happened at CSS Day 2026?</h2>



<p class="wp-block-paragraph"><a href="https://cssday.nl/" rel="noopener">CSS Day</a>, the annual CSS community conference, was held in Amsterdam on the 11th and 12th of this month (so two days, technically). While there wasn’t a livestream this year, recordings will become available in late June. Until then, check out <a href="https://bsky.app/profile/cssday.nl" rel="noopener">CSS Day on Bluesky</a> as well as the <a href="https://bsky.app/search?q=%23cssday" rel="noopener">#CSSDay Bluesky feed</a> to see what happened on stage, what happened behind the scenes, and even the slides from some of the talks.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1200" height="656" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2.webp?resize=1200%2C656&#038;ssl=1" alt="Portrait photos of the event speakers for CSS Day 2026." class="wp-image-395756" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2.webp?w=1200&amp;ssl=1 1200w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2.webp?resize=300%2C164&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2.webp?resize=1024%2C560&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/2.webp?resize=768%2C420&amp;ssl=1 768w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">Source: <a href="https://cssday.nl/" rel="noopener">CSS Day</a>.</figcaption></figure>



<p class="wp-block-paragraph">And no, there weren’t any flamethrowers this year, but it wasn’t DOOM-free either (if you know, you know).</p>



<h2 id="css-wordle" class="wp-block-heading">CSS Wordle</h2>



<p class="wp-block-paragraph">What a week it’s been, especially with everything that transpired at CSS Day, but if you have any energy left I highly recommend a round (or several rounds) of <a href="https://css-tricks.com/author/sunkanmifafowora/">Sunkanmi Fafowora</a>’s <a href="https://css-questions.com/css-wordle" rel="noopener">CSS Wordle</a>, which I’ve literally been obsessed with for the last week.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2560" height="1607" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?resize=2560%2C1607&#038;ssl=1" alt="An online game interface for CSS Wordle featuring a completed puzzle." class="wp-image-395758" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?w=2560&amp;ssl=1 2560w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?resize=300%2C188&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?resize=1024%2C643&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?resize=768%2C482&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?resize=1536%2C964&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/3-scaled.png?resize=2048%2C1285&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">Source: <a href="https://css-questions.com/css-wordle" rel="noopener">CSS-Questions</a> (don’t worry, this was yesterday&#8217;s answer).</figcaption></figure>



<h2 id="new-web-platform-features-and-updates" class="wp-block-heading">New web platform features and updates</h2>



<ul class="wp-block-list">
<li><a href="https://developer.chrome.com/release-notes/149" rel="noopener">Chrome 149</a>
<ul class="wp-block-list">
<li><a href="https://developer.chrome.com/blog/gap-decorations-stable" rel="noopener">Gap decorations</a> (now Baseline)</li>



<li><a href="https://css-tricks.com/almanac/properties/i/image-rendering/#:~:text=crisp%2Dedges%3A%20the%20contrast%2C%20colors%20and%20edges%20of%20the%20image%20will%20be%20preserved%20without%20any%20smoothing%20or%20blurring.%20This%20is%20intended%20for%20icons%2C%20data%20visualizations%2C%20diagrams%2C%20maps%2C%20pixel%20art%2C%20and%20anything%20with%20lines.%20This%20value%20applies%20to%20images%20scaled%20up%20or%20down."><code>image-rendering: crisp-edges</code></a> (now Baseline)</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/rect" rel="noopener"><code>rect()</code></a> and <a href="https://css-tricks.com/almanac/functions/x/xywh/"><code>xywh()</code></a> for <a href="https://css-tricks.com/almanac/properties/s/shape-outside/"><code>shape-outside</code></a> (now Baseline)</li>



<li><a href="https://css-tricks.com/almanac/functions/p/path/"><code>path()</code></a> and <a href="https://css-tricks.com/almanac/functions/s/shape/"><code>shape()</code></a> for <a href="https://css-tricks.com/almanac/properties/s/shape-outside/"><code>shape-outside</code></a> (no Safari or Firefox support)</li>
</ul>
</li>
</ul>



<p class="wp-block-paragraph">Until next time!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/whats-important-13/">What’s !important #13: @function, alpha(), CSS Wordle, and More</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


CSS functions, the alpha() function, Grid Lanes, some things about <dialog> that you might not know, CSS Wordle, and more — this is What’s !important right now.




CSS functions, expertly explained
Jane Ori expertly explained how CSS functions work. @function will probably be the biggest CSS feature to probably become Baseline this year, so I definitely found it a bit intimidating at first. That is, until I read Jane’s baby-step-by-baby-step walkthrough, which eases you into it really well.
In addition, Declan Chidlow wrote our @function documentation, which you might want to bookmark for quick reference in the future.
The alpha() function
Speaking of functions, the alpha() function caught me by surprise. Firstly, because I hadn’t heard of it, and secondly, because…why? We can already change the alpha channel:
/* This */
color: alpha(from var(--color) / 0.5);

/* Instead of this */
color: oklch(from var(--color) l c h / 0.5);
Well, this comment from Jason Leo sums it up. Firstly, it means that we won’t need to hard-code color values when we already have CSS variables. For years I’ve circumvented this by only storing the actual values in CSS variables, but having to wrap them in the color function every single time is really monotonous:
/* Just the values */
--color: 0.65 0.23 230;

/* Then use them flexibly */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);
But it’s better than this (in my opinion):
/* Function and values */
--color: oklch(0.65 0.23 230);

/* Delightful */
color: var(--color);

/* Delightless */
color: oklch(from var(--color) l c h / 0.5);
alpha() offers the best of both worlds:
/* Less delightless */
color: alpha(from var(--color) / 0.5);
Secondly, the color format is actually irrelevant in this context, so alpha(from var(--color) / 0.5) communicates the intention more clearly than oklch(from var(--color) l c h / 0.5) does. It also makes the declaration inherently shorter.
Credit to Adam Argyle for bringing alpha() up.
The Field Guide to Grid Lanes
WebKit launched the Field Guide to Grid Lanes (formerly known as CSS masonry layout). If you’ve ever read one of our CSS-Tricks Guides, it’s similar to that (their words — just sayin’). It’s a smooth introduction with a variety of barebones and real-world demos.
Source: WebKit.



Quality-of-life upgrades for <dialog>
Una Kravets talked about two quality-of-life upgrades for <dialog> — the new closedby attribute, which isn’t supported by Safari yet, and overscroll-behavior: contain. There are some nuggets in the comments too, including a tip about scrollbar-gutter: stable.
✅ Nice lil btn scale-down 
🙈 Layout change bc the scroll bar disappears
🙈 No light dismiss

These UX problems can easily be solved with:

– closedby="any"
– overscroll-behavior: contain
[image or embed]
— Una Kravets (@una.im) 13:28 · Jun 3, 2026




Also, Chris Coyier showed us how to animate <dialog>s, which I think many of us know how to do already, but it’s so easy to mess up. I have to Google it every time (it’s those bleeping @starting-styles).
What happened at CSS Day 2026?
CSS Day, the annual CSS community conference, was held in Amsterdam on the 11th and 12th of this month (so two days, technically). While there wasn’t a livestream this year, recordings will become available in late June. Until then, check out CSS Day on Bluesky as well as the #CSSDay Bluesky feed to see what happened on stage, what happened behind the scenes, and even the slides from some of the talks.
Source: CSS Day.



And no, there weren’t any flamethrowers this year, but it wasn’t DOOM-free either (if you know, you know).
CSS Wordle
What a week it’s been, especially with everything that transpired at CSS Day, but if you have any energy left I highly recommend a round (or several rounds) of Sunkanmi Fafowora’s CSS Wordle, which I’ve literally been obsessed with for the last week.
Source: CSS-Questions (don’t worry, this was yesterday’s answer).



New web platform features and updates
Chrome 149

Gap decorations (now Baseline)
image-rendering: crisp-edges (now Baseline)
rect() and xywh() for shape-outside (now Baseline)
path() and shape() for shape-outside (no Safari or Firefox support)
Until next time!
What’s !important #13: @function, alpha(), CSS Wordle, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

CSS functions, the alpha() function, Grid Lanes, some things about Dialog that you might not know, CSS Wordle, and more — this is What’s !important right now.
What’s !important #13: @function, alpha(), CSS Wordle, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

What’s !important #13: @function, alpha(), CSS Wordle, and More

<p>Why isn't my 3D view transition working?! Sunkanmi tackles this frustration and offers an elegant fix for it.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/why-isnt-my-3d-view-transition-working/">Why Isn&#8217;t My 3D View Transition Working?</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph">If you have played around with view transition a bunch, you may have noticed that 3D transitions between two pages (i.e., cross-document view transitions) don&#8217;t seem to work. That is, at least not without the browsers flattening things first.</p>



<p class="wp-block-paragraph">Image elements are the best example to demonstrate this because, like the snapshots a browser takes of the before-after states in a view transition, images are <a href="https://developer.mozilla.org/en-US/docs/Glossary/Replaced_elements" rel="noopener">replaced elements</a> so, in theory, we should be able to use them as a sort of reduced test case for 3D animations. For example, flipping one image to reveal another on click looks like this:</p>



<span id="more-395594"></span>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_019ce239-f88b-7c5c-8d0c-1dd74c0499d4" src="//codepen.io/editor/anon/embed/019ce239-f88b-7c5c-8d0c-1dd74c0499d4?height=450&amp;theme-id=1&amp;slug-hash=019ce239-f88b-7c5c-8d0c-1dd74c0499d4&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed 019ce239-f88b-7c5c-8d0c-1dd74c0499d4" title="CodePen Embed 019ce239-f88b-7c5c-8d0c-1dd74c0499d4" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">It&#8217;s important to note that, for the animation to work properly, we need to set the&nbsp;<a href="https://css-tricks.com/almanac/properties/p/perspective/"><code>perspective</code></a>&nbsp;property on the image’s parent container (in our case, it&#8217;s the&nbsp;<code>.scene</code>&nbsp;element). Otherwise, the 3D transformation is merely flat. It sort of <em>angles</em> the element’s appearance:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_bNBYqxM" src="//codepen.io/anon/embed/bNBYqxM?height=450&amp;theme-id=1&amp;slug-hash=bNBYqxM&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed bNBYqxM" title="CodePen Embed bNBYqxM" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p class="wp-block-paragraph">In CSS, the parent’s&nbsp;<code>persepective</code>&nbsp;is <a href="https://css-tricks.com/almanac/properties/p/perspective/#:~:text=it%20simply%20enables%20a%203D%2Dspace%20for%20children%20elements">applied to all its children</a>, excluding itself:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.scene {
  perspective: 1200px;

  .card { /* gets perspective */ }
}</code></pre>



<p class="wp-block-paragraph">What&#8217;s important here is the HTML structure. Specifically how the&nbsp;<code>.scene</code>&nbsp;container sits on top of the child <code>.card</code> elements, making the 3D effect come to life so the flip looks how it should:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="scene">
  &lt;div class="card">
    &lt;!-- Card Content Here -->
  &lt;/div>
&lt;/div></code></pre>



<p class="wp-block-paragraph">Perhaps our keyframe animation to flip the <code>.cards</code> is something like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@keyframes flipOut {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-90deg);
  }
}</code></pre>



<p class="wp-block-paragraph">Which we apply to the <code>.cards</code> like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.card.flip-out {
  animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.card.flip-in {
  animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards reverse;
}</code></pre>



<p class="wp-block-paragraph">…where the animates runs <code>forwards</code> when the <code>.flip-out</code> class is appended to the <code>.card</code> (courtesy of JavaScript watching for a click) and runs in <code>reverse</code> when the <code>.flip-in</code> class is appended.</p>



<p class="wp-block-paragraph">That’s the setup for how a cross-document view transition ought to work, too, right? If an image supports a 3D animation, then a view transitions snapshot should do the same. Let’s poke at that.</p>



<h2 id="setting-up-the-view-transition" class="wp-block-heading">Setting up the view transition</h2>



<p class="wp-block-paragraph">First things first, we have to opt into view transitions on both pages with the&nbsp;<code><a href="https://css-tricks.com/almanac/rules/v/view-transition/">@view-transition</a></code>&nbsp;at-rule by setting the&nbsp;<code>navigation</code>&nbsp;descriptor to&nbsp;<code>auto</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@view-transition {
  navigation: auto;
}</code></pre>



<p class="wp-block-paragraph">If we were to do nothing else, then one page fades into another when navigating between the two. It’s <a href="https://css-tricks.com/snippets/css/basic-view-transition/">the most basic</a> of all cross-document view transitions.</p>



<p class="wp-block-paragraph">How do we customize things? We use the&nbsp;<code>::view-transition-old()</code>&nbsp;and&nbsp;<code>::view-transition-new()</code>&nbsp;pseudo-classes, where the former is the “old” snapshot and the latter is the “new” one. Like the <code>.card</code> elements we used in the last example, that’s where we set the keyframe animation:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">::view-transition-old(root) {
  /* animation goes here */
}

::view-transition-new(root) {
  /* animation goes here */
}</code></pre>



<p class="is-style-explanation wp-block-paragraph">The&nbsp;<code>root</code>&nbsp;parameter tells the view transition to target the whole page and all the elements created (and not created) by the view transition&#8217;s default snapshot group.</p>



<h2 id="heres-the-problem" class="wp-block-heading">Here’s the problem</h2>



<p class="wp-block-paragraph">Let&#8217;s say we want to apply that same 3D flip to the entire webpage, where the snapshot of the “old” page flips into the “new” page. Again, a 3D animation asks us for two things:</p>



<ol class="wp-block-list">
<li>The&nbsp;<code>perspective</code>&nbsp;property on the parent element so its children get that 3D effect</li>



<li>An animation on the page for when the view transition happens</li>
</ol>



<p class="wp-block-paragraph">But: What exactly do we set the perspective on, as in, what is the parent element here?</p>



<p class="wp-block-paragraph">Since&nbsp;<a href="https://www.w3.org/TR/css-view-transitions-1/#view-transition-pseudos" rel="noopener">view transitions take snapshots of the entire webpage</a>, we might assume (logically) it would be the <code>&lt;html&gt;</code> element (or the <code>:root</code>), right? I mean, the DOM tree looks like this when a view transition is present:</p>



<pre rel="" class="wp-block-csstricks-code-block language-none" data-line=""><code markup="tt">html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  └─ ::view-transition-group(name)
  │     └─ ::view-transition-image-pair(name)
  │        ├─ ::view-transition-old(name)
  │        └─ ::view-transition-new(name)
  ├─ head
  └─ body
        └─ …</code></pre>



<p class="wp-block-paragraph">So, the entire snapshot should be where we put the <code>perspective</code>. Right? Turns out, no.</p>



<p class="wp-block-paragraph">In fact, does nothing at all! You&#8217;re left with this instead of the beautiful 3D flip we were able to use on the cards earlier:</p>



<figure class="wp-block-video"><video height="780" style="aspect-ratio: 1914 / 780;" width="1914" controls src="https://css-tricks.com/wp-content/uploads/2026/06/video_1.mp4"></video><figcaption class="wp-element-caption"><a href="https://github.com/sunkanmii/perspective-demo-on-root-and-body" rel="noopener">GitHub Source</a>&nbsp;and&nbsp;<a href="https://sunkanmii.github.io/perspective-demo-on-root-and-body/" rel="noopener">Live Demo</a></figcaption></figure>



<p class="wp-block-paragraph">Here’s the code I was working with:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Cross-document View Transition opt-in */
@view-transition {
  navigation: auto;
}

/* 3D flip: Old page flips away, new page flips in */
@keyframes flip-out {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}

@keyframes flip-in {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: flip-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  transform-origin: center center;
}

::view-transition-new(root) {
  animation: flip-in 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s backwards;
  transform-origin: center center;
}</code></pre>



<p class="is-style-explanation wp-block-paragraph"><strong>Note:</strong> I didn&#8217;t reverse the animation here since we flip to&nbsp;<code>-90deg</code>&nbsp;and then from&nbsp;<code>90deg</code>. Not exactly the same!</p>



<p class="wp-block-paragraph">And it doesn’t work, no matter if <code>perspective</code> is on <code>html</code> or <code>:root</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* &#x1f44e; */
html {
  perspective: 1100px;
}

/* &#x1f44e; */
:root {
  perspective: 1100px;
}</code></pre>



<p class="wp-block-paragraph">I did some digging and discovered that&nbsp;<code>perspective</code>&nbsp;(and 3D transformations in general) is one of several&nbsp;<a href="https://developer.chrome.com/docs/css-ui/view-transitions/nested-view-transition-groups#:~:text=This%20flat%20tree%20approach%20is%20sufficient%20for%20many%20use%2Dcases%2C%20but%20there%20are%20some%20styling%20use%2Dcases%20that%20cannot%20be%20achieved%20with%20it" rel="noopener">CSS properties that would produce an unusual effect</a>. (Leave it to Bramus to have the answer!)</p>



<p class="wp-block-paragraph">So&#8230; What do we do? Some ideas came to mind, but sadly failed:</p>



<ul class="wp-block-list">
<li>I tried setting the&nbsp;<code>perspective</code>&nbsp;property on the&nbsp;<code>body</code>.</li>



<li>I tried setting&nbsp;<code>perspective</code> inside&nbsp;<code>::view-transition-group(root)</code>.</li>



<li>I tried setting&nbsp;<code>perspective</code> inside the&nbsp;<a href="https://css-tricks.com/almanac/pseudo-selectors/v/view-transition/"><code>::view-transition</code></a>&nbsp;pseudo.</li>
</ul>



<p class="wp-block-paragraph">There&#8217;s actually a super simple workaround to this, and I can&#8217;t believe it took me this long to figure it out — don&#8217;t use&nbsp;<code>perspective</code> at all!</p>



<h2 id="the-solution" class="wp-block-heading">The solution</h2>



<p class="wp-block-paragraph">Short story: we have to use the&nbsp;<code><a href="https://css-tricks.com/almanac/functions/p/perspective">perspective()</a></code> function instead of the <code>perspective</code> property. And not inside any of the&nbsp;<code>::view-transition-*</code>&nbsp;pseudos as you might expect, but inside the&nbsp;<code>@keyframes</code>&nbsp;animation:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="3,7,13,17"><code markup="tt">@keyframes flip-out {
  0% {
    transform: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(1100px) rotateY(-90deg);
    opacity: 0;
  }
}
@keyframes flip-in {
  0% {
    transform: perspective(1100px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
}</code></pre>



<p class="wp-block-paragraph">This simple, but big change moves the scene from a flat <em>meh</em> to a beautiful <em>ah yeah</em>:</p>



<figure class="wp-block-video"><video height="780" style="aspect-ratio: 1914 / 780;" width="1914" controls src="https://css-tricks.com/wp-content/uploads/2026/06/video_2.mp4"></video><figcaption class="wp-element-caption"><a href="https://github.com/sunkanmii/persepective-inside-animation" rel="noopener">GitHub Source</a> and&nbsp;<a href="https://sunkanmii.github.io/persepective-inside-animation/" rel="noopener">Live Demo</a></figcaption></figure>



<p class="wp-block-paragraph">Here’s why, apparently. The view transition pseudo-element tree is rendered <em>outside</em> the normal HTML flow. More specifically, the entire view transition tree is&nbsp;<a href="https://www.w3.org/TR/css-view-transitions-1/#view-transition-rendering" rel="noopener">rendered above the DOM in its own layer</a>. However, particularly for&nbsp;<code>::view-transition</code>, I&#8217;m not too sure why this is the case, but my best guess would be that each&nbsp;<a href="https://www.w3.org/TR/css-view-transitions-1/#ua-styles" rel="noopener">view transition group automatically has its position and transform values overridden by the browser</a>; hence, interfering with the <code>perspective</code>.</p>



<p class="is-style-default wp-block-paragraph">The difference between <code>perspective</code> and <code>perspective()</code>? The <code>perspective</code> property is applied to the parent element, while <code>perspective()</code> is a <code>transform</code> property function applied directly to the element itself. And since the view transition pseudo tree does not have a true parent, we’ve gotta use <code>perspective()</code> since it doesn’t require a parent. <em>Phew.</em></p>



<h2 id="to-recap" class="wp-block-heading">To recap…</h2>



<p class="wp-block-paragraph">Setting&nbsp;<code>perspective</code>&nbsp;on the&nbsp;<code>html</code>,&nbsp;<code>:root</code>, or any of the view transition pseudo-class won&#8217;t work. And if you have been struggling to find the solution, like I was, I think this little, but big&nbsp;<code>perspective()</code>&nbsp;change will solve that issue if you ever come across it. Take it from me, I battled with this for weeks till I came back today to rant about it and discovered a solution to it. A perk of writing!</p>



<p class="wp-block-paragraph"></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/why-isnt-my-3d-view-transition-working/">Why Isn&#8217;t My 3D View Transition Working?</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


If you have played around with view transition a bunch, you may have noticed that 3D transitions between two pages (i.e., cross-document view transitions) don’t seem to work. That is, at least not without the browsers flattening things first.
Image elements are the best example to demonstrate this because, like the snapshots a browser takes of the before-after states in a view transition, images are replaced elements so, in theory, we should be able to use them as a sort of reduced test case for 3D animations. For example, flipping one image to reveal another on click looks like this:




CodePen Embed Fallback
It’s important to note that, for the animation to work properly, we need to set the perspective property on the image’s parent container (in our case, it’s the .scene element). Otherwise, the 3D transformation is merely flat. It sort of angles the element’s appearance:
CodePen Embed Fallback
In CSS, the parent’s persepective is applied to all its children, excluding itself:
.scene {
  perspective: 1200px;

  .card { /* gets perspective */ }
}
What’s important here is the HTML structure. Specifically how the .scene container sits on top of the child .card elements, making the 3D effect come to life so the flip looks how it should:
<div class="scene">
  <div class="card">
    
  </div>
</div>
Perhaps our keyframe animation to flip the .cards is something like this:
@keyframes flipOut {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-90deg);
  }
}
Which we apply to the .cards like this:
.card.flip-out {
  animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.card.flip-in {
  animation: flipOut 5.2s cubic-bezier(0.4, 0, 0.2, 1) forwards reverse;
}
…where the animates runs forwards when the .flip-out class is appended to the .card (courtesy of JavaScript watching for a click) and runs in reverse when the .flip-in class is appended.
That’s the setup for how a cross-document view transition ought to work, too, right? If an image supports a 3D animation, then a view transitions snapshot should do the same. Let’s poke at that.
Setting up the view transition
First things first, we have to opt into view transitions on both pages with the @view-transition at-rule by setting the navigation descriptor to auto:
@view-transition {
  navigation: auto;
}
If we were to do nothing else, then one page fades into another when navigating between the two. It’s the most basic of all cross-document view transitions.
How do we customize things? We use the ::view-transition-old() and ::view-transition-new() pseudo-classes, where the former is the “old” snapshot and the latter is the “new” one. Like the .card elements we used in the last example, that’s where we set the keyframe animation:
::view-transition-old(root) {
  /* animation goes here */
}

::view-transition-new(root) {
  /* animation goes here */
}
The root parameter tells the view transition to target the whole page and all the elements created (and not created) by the view transition’s default snapshot group.
Here’s the problem
Let’s say we want to apply that same 3D flip to the entire webpage, where the snapshot of the “old” page flips into the “new” page. Again, a 3D animation asks us for two things:
The perspective property on the parent element so its children get that 3D effect
An animation on the page for when the view transition happens
But: What exactly do we set the perspective on, as in, what is the parent element here?
Since view transitions take snapshots of the entire webpage, we might assume (logically) it would be the <html> element (or the :root), right? I mean, the DOM tree looks like this when a view transition is present:
html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  └─ ::view-transition-group(name)
  │     └─ ::view-transition-image-pair(name)
  │        ├─ ::view-transition-old(name)
  │        └─ ::view-transition-new(name)
  ├─ head
  └─ body
        └─ …
So, the entire snapshot should be where we put the perspective. Right? Turns out, no.
In fact, does nothing at all! You’re left with this instead of the beautiful 3D flip we were able to use on the cards earlier:
GitHub Source and Live Demo



Here’s the code I was working with:
/* Cross-document View Transition opt-in */
@view-transition {
  navigation: auto;
}

/* 3D flip: Old page flips away, new page flips in */
@keyframes flip-out {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}

@keyframes flip-in {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: flip-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  transform-origin: center center;
}

::view-transition-new(root) {
  animation: flip-in 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s backwards;
  transform-origin: center center;
}
Note: I didn’t reverse the animation here since we flip to -90deg and then from 90deg. Not exactly the same!
And it doesn’t work, no matter if perspective is on html or :root:
/* 👎 */
html {
  perspective: 1100px;
}

/* 👎 */
:root {
  perspective: 1100px;
}
I did some digging and discovered that perspective (and 3D transformations in general) is one of several CSS properties that would produce an unusual effect. (Leave it to Bramus to have the answer!)
So… What do we do? Some ideas came to mind, but sadly failed:
I tried setting the perspective property on the body.
I tried setting perspective inside ::view-transition-group(root).
I tried setting perspective inside the ::view-transition pseudo.
There’s actually a super simple workaround to this, and I can’t believe it took me this long to figure it out — don’t use perspective at all!
The solution
Short story: we have to use the perspective() function instead of the perspective property. And not inside any of the ::view-transition-* pseudos as you might expect, but inside the @keyframes animation:
@keyframes flip-out {
  0% {
    transform: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(1100px) rotateY(-90deg);
    opacity: 0;
  }
}
@keyframes flip-in {
  0% {
    transform: perspective(1100px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(1100px) rotateY(0deg);
    opacity: 1;
  }
}
This simple, but big change moves the scene from a flat meh to a beautiful ah yeah:
GitHub Source and Live Demo



Here’s why, apparently. The view transition pseudo-element tree is rendered outside the normal HTML flow. More specifically, the entire view transition tree is rendered above the DOM in its own layer. However, particularly for ::view-transition, I’m not too sure why this is the case, but my best guess would be that each view transition group automatically has its position and transform values overridden by the browser; hence, interfering with the perspective.
The difference between perspective and perspective()? The perspective property is applied to the parent element, while perspective() is a transform property function applied directly to the element itself. And since the view transition pseudo tree does not have a true parent, we’ve gotta use perspective() since it doesn’t require a parent. Phew.
To recap…
Setting perspective on the html, :root, or any of the view transition pseudo-class won’t work. And if you have been struggling to find the solution, like I was, I think this little, but big perspective() change will solve that issue if you ever come across it. Take it from me, I battled with this for weeks till I came back today to rant about it and discovered a solution to it. A perk of writing!


Why Isn’t My 3D View Transition Working? originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Why isn't my 3D view transition working?! Sunkanmi tackles this frustration and offers an elegant fix for it.
Why Isn’t My 3D View Transition Working? originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

Why Isn’t My 3D View Transition Working?

<p>One of those nuances to keep in your back pocket when writing for screen readers.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/navigation-in-your-navigation-labels/">There’s no need to include ‘navigation’ in your navigation labels</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>



<p class="wp-block-paragraph"><a href="https://www.tempertemper.net/blog/theres-no-need-to-include-navigation-in-your-navigation-labels" rel="noopener">Mark Underhill</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">And now to the reason I wrote this post: including the word “navigation” in your&nbsp;<code>&lt;nav&gt;</code>&nbsp;labels. There’s no need. If we did, we’d hear something like “Navigation, Primary navigation”. Not the end of the world, but unnecessarily repetitive for screen reader users.</p>
</blockquote>



<span id="more-395744"></span>



<p class="wp-block-paragraph">One of those nuances to keep in your back pocket when writing for screen readers. Reminds me, too, that there&#8217;s no need to say something like &#8220;image&#8221; when describing one in the <code>alt</code> text. That&#8217;s sorta implied. While I&#8217;m no screen reading native, I imagine these sorts of things are minor pet peeves that, given a little love and consideration, make navigating that much more enjoyable.</p>



<p class="wp-block-paragraph">While we&#8217;re on the UX of accessible text, another consideration: <a href="https://piccalil.li/blog/accessible-faux-nested-interactive-controls/#a-tangent-about-accessible-name-length" rel="noopener">keep it succinct</a>. <a href="https://css-tricks.com/just-how-long-should-alt-text-be/">It doesn&#8217;t have to be a novel.</a></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/navigation-in-your-navigation-labels/">There’s no need to include ‘navigation’ in your navigation labels</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


Mark Underhill:
And now to the reason I wrote this post: including the word “navigation” in your <nav> labels. There’s no need. If we did, we’d hear something like “Navigation, Primary navigation”. Not the end of the world, but unnecessarily repetitive for screen reader users.




One of those nuances to keep in your back pocket when writing for screen readers. Reminds me, too, that there’s no need to say something like “image” when describing one in the alt text. That’s sorta implied. While I’m no screen reading native, I imagine these sorts of things are minor pet peeves that, given a little love and consideration, make navigating that much more enjoyable.
While we’re on the UX of accessible text, another consideration: keep it succinct. It doesn’t have to be a novel.
There’s no need to include ‘navigation’ in your navigation labels originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

One of those nuances to keep in your back pocket when writing for screen readers.
There’s no need to include ‘navigation’ in your navigation labels originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

There’s no need to include ‘navigation’ in your navigation labels

<p>There are many ways to create memorable experiences. Sometimes it's as simple as a form that completes smoothly. But here I'm interested in sharing techniques I reach for when I want a site to feel alive and be remembered.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/creating-memorable-web-experiences-a-modern-css-toolkit/">Creating Memorable Web Experiences: A Modern CSS Toolkit</a> originally handwritten and published with love on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>. You should really <a href="https://css-tricks.com/newsletters/">get the newsletter</a> as well.</p>


I love the fact that CSS is finally reclaiming control over visual interactions, taking charge of the styling, the animation, and the accessibility exactly as it should. Today, native browser capabilities allow us to move the heavy lifting away from the JavaScript main thread and closer to the GPU. By letting the browser’s engine optimize performance under the hood, we save energy and processing power while building code that is robust, accessible, and independent of external libraries that might deprecate tomorrow.
We have 3D, modern layout techniques, clip-paths, transforms, custom properties, scroll-driven animations, view-transitions, @property — and we can animate almost anything, even to auto-height!
And, of course, there’s SVG, which isn’t new, but allows us to build entire websites through illustrations and animations. Take the example below: it’s responsive, lightweight, accessible, and powered primarily by CSS Grid + SVG.








We can even build an entire video game including the UI using only SVG:




What follows is not a complete guide to modern CSS, but an opinionated selection of techniques I reach for when I want a site to feel alive and be remembered. There are many ways to create memorable experiences. Sometimes it’s as simple as a form that completes smoothly. But here I’m interested in the expressive end of the spectrum.
Motion as Communication: Defining Your Intent
Before we dive into the technical side, I want to clarify something: we shouldn’t move things just because we can.
Everything communicates, and our animations are no exception. We must take the time to design movements that support the message we want to convey in order to keep our intents tightly scoped without overdoing it.
Here’s a methodology I use when planning the design and animation of a site.
Imagine we’re working on a project for a nature event focused on mushrooms. The design language changes completely depending on the “vibe”: selling a “Psychedelic Mushroom Rave” is worlds apart from a “Spiritual Mushroom Retreat” focused on ancestral medicine.
Every design decision communicates. I like to create what I call keyword lists to define my intent and scope. For example, I might break things down into different options:
Option A: The Psychedelic Event
Visuals: Colorful, saturated, high-contrast, illustrations, distortions
Movement: Fast, frantic, unpredictable, morphing, rhythmic, synced loops, hypnotic
Feeling: Fun, chaotic, energetic, stimulating, surprising
Typography: Funk, “psych-rock”
Style References: Pop Art, 60s/70s op art, rave flyers
Actions: Dancing
Extras: Emojis, films (e.g., Fear and Loathing in Las Vegas)
Option B: The Spiritual Retreat
Visuals: Earth tones, neutral tones, de-saturated, photograph-heavy, nature, whitespace
Movement: Slow, fluid, organic, breathing, subtle parallax, smooth scrolling.
Feeling: Calm, serene, introspective, contemplative, safe
Typography: Elegant Serif, minimalist sans-serif, wide spacing, legible
Style References: Scandinavian design, Japanese Wabi-sabi, wellness/spa aesthetics, botanical books
Actions: Breathing
Extras: Healing sounds, film (e.g., Eat Pray Love)
This is the kind of exercise I do to guide my design and animation decisions. The lists will help me select everything from which CSS properties I plan to use and how to use them. I even share them with the client and, together, we choose a direction.
Let’s say we go with Option A and look at a few examples of what I think are essential ingredients for creating memorable user experiences.
Split Text Animations
These animations became popular thanks to the GSAP SplitText plugin. It splits text by character (or words, or lines if you like) so we can create interesting text effects, like staggered animations.
<h1 class="reveal-text">
  <span style="--i:0">H</span>
  <span style="--i:1">O</span>
  <span style="--i:2">L</span>
  <span style="--i:3">A</span>
</h1>
This approach wraps each letter in “Hola” in a span. From there, each span is inline-styled with a custom property indexing the spans in order. Which is something that will get a lot easier when the sibling-index() function gains broad browser support.
But for now, each custom property value acts as a multiplier that increases an animation-delay, staggering each span. In this case we fade in each character as it moves up.
.reveal-text span {
  animation: slideUp 0.6s ease-out forwards;
  animation-delay: calc(var(--i) * 0.1s);
  display: inline-block;
  opacity: 0;
  transform: translateY(3rem);
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
Accessibility is the tricky part here. The instinct is to hide all the individual spans from assistive technology with aria-hidden="true" and add a visually hidden version of the full word for screen readers:
<h1>
  <span class="sr-only">HOLA</span>
  <span aria-hidden="true" class="reveal-text">
    <span style="--i:0">H</span>
    <span style="--i:1">O</span>
    <span style="--i:2">L</span>
    <span style="--i:3">A</span>
  </span>
</h1>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
But be warned: this pattern doesn’t guarantee a good experience across all screen readers. Adrian Roselli tested GSAP’s SplitText across eight screen reader and browser combinations and found it only worked correctly in two of them. If you ship this technique, test it with real assistive technology.
If that risk feels too high, there’s a very clever alternative from Preethi worth knowing that uses the letter-spacing property. It accepts negative values that collapse characters on top of each other, hiding them without touching the DOM at all. Animate it back to 0 and you get a similar reveal effect without accessibility overhead.
What would be great is a pseudo-selector like ::nth-letter to target individual glyphs directly from CSS the way ::first-letter selects the first character. But unfortunately, there’s no ::nth-letter… at least yet.
Remember to respect the user’s motion preferences on every animation:
@media (prefers-reduced-motion: reduce) {
  .reveal-text span {
    animation: none; /* or a softer animation */
  }
}
And here we go:
CodePen Embed Fallback
It might not scale too much when we have a lot of text and different animations we want to apply. For the psychedelic event, I wanted to try splitting text with SMIL, but it was verbose. This is the code for animating two letters alone:
<svg role="img" aria-label="TODOS LOS HONGOS" viewBox="0 0 1366 938.96">
  <title>TODOS LOS HONGOS</title>
  <g aria-hidden="true">
    <text transform="rotate(-9.87 2181.107 -1635.1)" opacity="0">T
      <animate attributeName="dy" values="100; -20; 0" keyTimes="0; 0.8; 1" dur="0.4s" begin="0s" fill="freeze"/>
      <animate attributeName="opacity" from="0" to="1" dur="0.01s" begin="0s" fill="freeze"/>
    </text>
    <text transform="rotate(-8.92 2372.854 -2084.755)" opacity="0">O
      <animate attributeName="dy" values="100; -20; 0" keyTimes="0; 0.8; 1" dur="0.4s" begin="0.1s" fill="freeze"/>
      <animate attributeName="opacity" from="0" to="1" dur="0.01s" begin="0.1s" fill="freeze"/>
    </text>
    
  </g>
</svg>
Add role="img" and a <title> to the <svg>, and wrap the individual letters in <g aria-hidden="true">. That gives screen readers one clean label to read. It works well in some combinations and badly in others, so if the text is critical, don’t animate it.
Here is the complete code. It’s easier to write it when you have an AI to do it for you:
CodePen Embed Fallback
For longer text, a library like GSAP gives you more control, but the same accessibility risks we discussed earlier apply, and the results across screen readers are inconsistent:
<h1>
  <span class="splitfirst">Todos los hongos son</span>
  <span class="splitlast">mágicos</span>
</h1>
const splitFirst = SplitText.create('.splitfirst', {
  type: "chars",
});
const splitLast = SplitText.create('.splitlast', {
  type: "chars, lines",
  mask: "lines"
});

const tween = gsap.timeline()
.from(splitFirst.chars, {
  xPercent: 100,
  stagger: 0.1,
  opacity: 0,
  duration: 1, 
})
.from(splitLast.chars, {
  yPercent: 100,
  stagger: 0.1,
  opacity: 0,
  duration: 1,
});
This would be a nice approach for Option B if we had gone that route. See how “serene” things feel as the text fades in.
CodePen Embed Fallback
Masking & Clipping
The clip-path and mask properties allow us to hide portions of an element, but they work on fundamentally different principles. Clipping is a binary decision: pixels are either fully visible or completely gone,  making it the right choice for clean geometric shapes, like polygons, circles, or SVG paths, where the browser can also optimize rendering more efficiently. Masking, on the other hand, uses luminance or alpha channel values: white reveals, black hides, and everything in between produces partial transparency. This makes it the tool for soft edges, gradient fades, and irregular textures. Keep in mind that if you have a very complex vector shape, it might be more performant to use a mask than a vector clip-path. Sarah Drasner has a nice write-up on when it makes sense to use one over the other.
Our project is a very clear use case for clip-path. We have a circle shape that starts with clip-path: circle(0%), which makes the element invisible (the clipping circle has zero radius). Over the duration of the animation it expands to circle(100%), which fully reveals the element as the circle grows outward from its center. Meanwhile, we fade things in with the help of opacity.
#rainbow, #floor, #mushroom, #flores {
  opacity: 0;
  animation: maskAnim 2s ease-in forwards;
}

@keyframes maskAnim {
  0%, 1% { 
    clip-path: circle(0%);
    opacity: 1; 
  }
  100% { 
    clip-path: circle(100%); 
    opacity: 1; 
  }
}
Note: The 1% keyframe is there to make sure the browser starts the clip-path interpolation from circle(0%) rather than from whatever value the element might already have. Without it, some browsers will unexpectedly jump at the very start. A cleaner alternative is to use animation-fill-mode: both because it locks the element in its from state before the animation begins.
From there, we apply the same animation to the different SVG groups in our illustration:
<g id="rainbow">...</g>
<g id="floor">...</g>
<g id="mushroom">...</g>
<g id="flowers">...</g>
How psychedelic is this?!
CodePen Embed Fallback
Scroll-Driven Animations
Scroll-driven animations are great because we can connect an animation’s progress to the user’s scrolling instead of a typical timeline that runs and stops.




We can use it for subtle and somewhat “trippy” movement, like a light parallax effect. In this case, we can make things that appear closer to the user move faster than the ones that are more distant.
CodePen Embed Fallback
This is the full CSS:
#estrellas, #arcoiris, .text-line, #fecha, #arco, #flores, #dir, #piso, #barras {
  animation: moveUp both;
  animation-timeline: view();
}

@keyframes moveUp {
  from { transform: translateY(var(--offset)); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#estrellas { --offset: 10vh; }
#arcoiris { --offset: 20vh; }
#fecha { --offset: 45vh; }
#arco { --offset: 50vh; }
#dir { --offset: 50vh; }
#flores { --offset: 65vh; }
#piso { --offset: 85vh; }
#barras { --offset: 90vh; }
The animation-timeline: view() says that things should start the animation as soon as an element enters the scrollport when the user scrolls into it, and fully completes when it scrolls out of view. To make things move at different velocities, we place them at different offsets using an indexed --offset custom property like we did earlier for splitting text.
3D Transforms
This one is trickier and we need to keep an eye on performance. A tool like Layoutit can help carry the lift because it has a voxels and terrain generator built entirely with CSS 3D. It can go even further when it’s complemented with VoxCSS, a full voxel engine that renders 3D cuboids using only CSS Grid layers and transforms without the complexity of Canvas or WebGL.
Let’s put together some combination scrolling and 3D effects. It’s the sort of thing that supports the “hypnotic” and “dancing” ideas in the Option A keyword list. Check this out:
CodePen Embed Fallback
Here, I’ve set up a scene with depth using the perspective property and then wrap all the child elements inside the scene in a 3D space with transform-style: preserve-3d. This way, all the child image elements rotate and translate along the depth axis (or z-axis).
Let’s connect that to a scroll-driven animation that uses transform: rotateY:
.scene {
  perspective: 1200px;
}

.img-wrapper { 
  transform-style: preserve-3d; 
  animation: rotateImg linear;
  animation-timeline: scroll();

  > img {
    transform: rotateY(270deg) translate3d(0, 50px, var(--distance));
  }

  > img:nth-child(2) {
    transform: rotateY(180deg) translate3d(0, 50px, var(--distance));
  }
}

/* etc. */

@keyframes rotateImg {
  to { transform: rotateY(360deg); }
}
Custom Cursors
cursor might be one of the most unused CSS properties. There are many cursor types we can use, although there are definitely opinions on just how far to go with this.
And we can use it to play around with the images, displaying different cursors on different containers when the user hovers them. I would personally use an SVG and PNG image for transparency support, though the property supports any raster image.
It’s worth noting that cursor sizes vary by browser: Firefox caps custom cursors at 32×32px, while Chrome supports up to 128×128px. Most browsers refuse to display — or will downscale — cursors that are larger than 32×32px on high-DPI (retina) screens. Keeping your cursor at 32×32px is the safest choice to ensure consistency.
For example:
.box1 {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAMAAAD63NUrAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAFZJREFUeNqdzksKwDAIAFHH+x+6lIYOVPOhs5OHJnES/5UkYKEkU7xjijSIm50iFh4fAXgYDd/yumVVRSwsqq/nRA3xVK0oo06d5U6DpQZ7PV7lMxH7LkaQAbYFwryzAAAAAElFTkSuQmCC),auto; 
}
We can even set multiple fallbacks to ensure the widest level of browser support:
body {
  cursor: url('path-to-image.png'), url('path-to-image-2.svg'), url('path-to-image-3.jpeg'), auto;
}
While this is cool and all, we have to keep accessibility in mind for something that changes default web behavior like this. Custom cursors could be fun to apply to very specific elements rather than wholesale across the board.
CodePen Embed Fallback
Bonus: Anchor Positioning
One more thing before we wrap up. I’ve been playing with CSS Anchor Positioning, inspired by a Kevin Powell demo. We can use it to attach a single pseudo-element to a currently-hovered item instead of attaching a pseudo-element for each and every item. In other words, we create a single element and anchor it to a hovered element, like highlighting cards:
CodePen Embed Fallback
That opens up interesting possibilities, like being able to transition the hover state between cards. In this case, I’m using the linear() function to get that natural bounce with help from Easing Wizard.
Conclusion
The technical barriers for creating memorable web experiences are mostly gone now. I hope everything we’ve covered here gives you an idea of just how far we can go with modern CSS features that completely remove the need for additional JavaScript. We have more possibilities than ever before, all without the need for complex technical overhead like days past.
So, instead of asking, is this possible?, the most important question becomes, does this movement tell a better story? If yes, ship it. Use these tools not because you can, but because they help you tell a better story, one that is also accessible and performant.
And, of course, everything in here is just a handful of ways to do that. But what sort of memorable experiences have you used in your work? Or what have you seen on other sites?
Creating Memorable Web Experiences: A Modern CSS Toolkit originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

There are many ways to create memorable experiences. Sometimes it's as simple as a form that completes smoothly. But here I'm interested in sharing techniques I reach for when I want a site to feel alive and be remembered.
Creating Memorable Web Experiences: A Modern CSS Toolkit originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.