New Web Platform Features for March 2026: Scroll Trigger Animations and Grid Lanes

web.dev’s New to the web platform in March has been released. An inventory of features that are now available in Chrome 146, Firefox 149, and Safari 26.4, which were released as stable versions in March 2026. This month saw some big moves in CSS animation and layout.

In a previous article, I covered Changes in Chrome 145-146, which focused on JPEG-XL, PQC, and WebMCP. This time we’ll be talking about CSS and JavaScript platform APIs.

Chrome 146: Scroll trigger animation

The biggest highlight of Chrome 146 is CSS scroll-triggered animations. The characteristics are different from scroll-driven animations that will be introduced in 2023.

With scroll-driven animations, the progress of the animation changes from 0 to 100% depending on the scroll position, and when you stop scrolling, the animation also stops. On the other hand, scroll-triggered animations are a mechanism that “fires a time-based animation when a specific scroll position is passed.” The animation continues to play until the end even if the scrolling stops.

The difference between the two is as follows.

item	scroll-driven	scroll-triggered
Progress control	Linked to scroll position	Time-based (normal CSS animation)
When scrolling stops	Animation also stops	Continue playing
Typical uses	Parallax, progress bar	Card appearance, fade-in
Introduced version	Chrome 115 (2023)	Chrome 146 (2026)

Related CSS properties

Several new properties have been added.

timeline-trigger is a shorthand used to define a trigger, specifying the name, source, and effective range all at once. animation-trigger specifies which trigger fires the animation and which action (playback/reverse playback) to perform. trigger-scope limits the scope of trigger names and prevents global name collisions.

The actual code looks like this.

@keyframes card-appear {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

.card {
  /* トリガーの定義 */
  timeline-trigger:
    --card-trigger
    view()
    contain 15% contain 85% / entry 100% exit 0%;
  trigger-scope: --card-trigger;

  /* アニメーションとトリガーの紐付け */
  animation: card-appear 0.35s ease-in-out both;
  animation-trigger: --card-trigger play-forwards play-backwards;
}

view() is a timeline source that monitors the intersection with the viewport, contain 15% contain 85% represents the activation range, and entry 100% exit 0% represents the active range. The animation plays forward when the card enters 15% of the screen, and plays backwards when it exits beyond 85%.

The pattern of “bringing an element out when it becomes visible when scrolling”, which was previously written using IntersectionObserver and JavaScript, can now be written declaratively using only CSS. There is a demo and detailed specifications in the explanatory article on the Chrome official blog.

Safari 26.4: Native masonry with Grid Lanes

Safari 26.4 includes display: grid-lanes. With the ability to create a Pinterest-like masonry layout using only CSS, patterns that previously required JavaScript libraries such as masonry.js have become native.

History of naming

The name of this feature has been subject to long debate. The W3C CSS Working Group considered many candidates, including masonry, collapsed-grid, grid-stack, and packed-grid, and settled on grid-lanes in January 2026. “Lane” is a metaphor for a traffic lane, with items of different heights flowing down the lane.

Additionally, a property name called flow-tolerance is also being discussed at the specification level, and will be added in the future as a feature to control how aggressively items move between lanes.

Basic usage

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

With conventional CSS Grid, all items are arranged in rows, which creates unnatural spaces between items of different heights. In Grid Lanes, items are placed at their natural height and packed into empty spaces. The main difference from simple absolute JS libraries is that keyboard navigation accessibility is also maintained.

Web Inspector in Safari 26.4 also adds Grid Lanes visualization, which allows you to overlay order numbers and autocomplete properties for each lane.

As for the implementation status between browsers, Chromium had an advance implementation of display: masonry in Chrome 140, but is in the process of transitioning to grid-lanes, and Firefox has had a masonry implementation on display: grid since 2020, but is also in the process of migrating to grid-lanes. It will take a while for all browsers to have grid-lanes. WebKit’s official blog article has the design philosophy and detailed specifications.

New features in Firefox 149

CloseWatcher

Includes CloseWatcher interface. Custom components that have a “close” action, such as dialogs and popovers, can now support the device’s native close mechanism (Esc key on Windows, Back button on Android).

const watcher = new CloseWatcher();
watcher.addEventListener('close', () => {
  myCustomDialog.hide();
});

This is a feature that was previously implemented in Chrome 126, and Firefox has now caught up. This leaves only Safari among the major browsers (it’s included in the Safari Technology Preview).

Popover hint value

Added new hint value to popover attribute. You can display the traditional auto popover without closing it, and only close other hint popovers. It can be used to display auxiliary information such as tooltips that do not interfere with the main UI.

<div popover="hint" id="tooltip">
  補足情報がここに入る
</div>

Features now available cross-browser

Optional Container Query Conditions

Both Firefox 149 and Safari 26.4 now support name-only @container queries. Matches just the container name, without size or value conditions.

.sidebar {
  container-name: sidebar;
}

@container sidebar {
  .card {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

This is useful in cases where you only want to determine whether the component library is inside this container. Style switching that does not depend on size can be written declaratively.

Iterator.concat()

Iterator.concat() is now Baseline in Chrome 146 and Safari 26.4 (previously implemented in Firefox 147). Multiple iterators can be concatenated and treated as one iterator.

const first = [1, 2, 3].values();
const second = [4, 5, 6].values();

for (const n of Iterator.concat(first, second)) {
  console.log(n); // 1, 2, 3, 4, 5, 6
}

Unlike concat() for arrays, it is an iterator, so it is evaluated lazily. Memory efficient when concatenating large datasets.

Safari 26.4: Math functions in sizes attribute

min(), max(), and clamp() can now be used in the sizes attribute of <img> (Chrome and Firefox are already supported).

<img
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="min(100vw, 1200px)"
  alt="レスポンシブ画像"
>

Responsive image size specification, which was previously written using a combination of media queries and fixed values, can now be written concisely with a single expression. You can also specify something like clamp(320px, 50vw, 800px).

Other notable features of Safari 26.4

Although not included in the web.dev article, WebKit’s Safari 26.4 Release Notes also includes WebTransport (low-latency bidirectional communication via HTTP/3/QUIC), Keyboard Lock API (capturing browser reservation keys in full-screen apps), threaded scroll-driven animations, and more. Threading of scroll-driven animations is progressing on the Safari side as well, and the foundation for scrolling animations that do not block the main thread is being laid.

---

Personally, I think the most impactful change this month is to Grid Lanes. Being able to use masonry without a JS library has been a long-awaited dream, and I like that it’s designed with accessibility in mind. I am curious about the timing when grid-lanes will be available in all browsers.