---
title: view transitions
date: "2025-11-04T06:40:00+01:00"
url: "https://wirres.net/articles/view-transitions"
tags: [css, html, animationen, view-transitions]
category: über wirres
additional_categories: [wirres.net]
author: felix schwenzel
---

# view transitions

beim [medienbäcker](https://medienbaecker.com/articles) kürzlich gesehen, dass seine überschriften angenehm animiert sind.

[![bildschirmaufnahme von der medienbaecker.com seite. die überschriften werden beim anklicken und dem seitenwechsel animiert, sie rutschen quasi an die richtige stelle](https://wirres.net/cache/md-localvideo-thumbs/articles-view-transitions-articles-view-transitions-medienbaecker-mov_480_h264-png-gen.jpg)](https://wirres.net/media/pages/articles/view-transitions/339f87a412-1762235000/medienbaecker.mov_480_h264.mp4)

das wollte ich auch haben, also angefangen im quelltext zu graben. es zeigt sich, das sind nur ein paar zeilen code, um diesen effekt zu erzielen. im css:

```css
@media (prefers-reduced-motion: no-preference){
  @view-transition { navigation: auto; }
}
```

damit werden die view transitions aktiviert, allerdings nur, wenn der benutzer in seinen systemeinstellungen nicht „reduzierte bewegung“ eingestellt hat.

elemente die man animieren möchte müssen über die seiten hinweg einfach den gleichen `view-transition-name` bekommen. in meinen kirby templates und snippets habe ich dafür gesorgt, dass alle `<article>` und `<img>` elemente den gleichen `view-transition-name` bekommen.

```php
<article data-template="templates/note.php" class="note id-<?= $page->uuid()->id() 
    ?> category-<?= $page->category() 
    ?> category-x<?= $category 
    ?> h-entry" id="<?= $page->uuid()->id() 
    ?>" style="view-transition-name: vt-<?= $page->slug() ?>-article">
```

und das isses schon. funktioniert faszinierenderweise über seiten hinweg, chrome(ium) und safari können es, firefox noch nicht (über seiten hinweg) .

[![bildschirmaufnahme von wirres.net. die überschriften und thumbnails werden beim anklicken und dem seitenwechsel animiert, sie rutschen quasi an die richtige stelle](https://wirres.net/cache/md-localvideo-thumbs/articles-view-transitions-articles-view-transitions-wirresnettranssiztions-mov_480_h264-png-gen.jpg)](https://wirres.net/media/pages/articles/view-transitions/1bc037802d-1762235483/wirresnettranssiztions.mov_480_h264.mp4)

insgesamt laden alle seiten etwas weicher, weil ich meistens keine gekürzten artikel anzeige, ist die animation, finde ich, ziemlich subtil. lediglich im [archiv](https://wirres.net/archiv/2025/10), in [suchergebnissen](https://wirres.net/suche?q=morgenspaziergang&time=any&sortq=date&from=&to=&place=&r=100) oder im [bilder-grid](https://wirres.net/rueckseite#:~:text=in%20der%20kategorie%20bilder%20poste%20ich%20gelegentlich%20oder%20regelm%C3%A4ssig%20%E2%80%94%20kommt%20halt%20drauf%20an%20%E2%80%94%20bilder%2C%20die%20nicht%20unbedingt%20auf%20der%20startseite%20oder%20dem%20RSS%20feed%20sichtbar%20sind.%20aber%20sie%20sind%20immer%20%C3%BCber%20die%20kategorie%2Dansicht%20bilder%20zu%20sehen%20%E2%80%94%20oder%20eben%20hier.) auf der rückseite ist es etwas auffälliger.