view-transition-class

/* Beide Seiten: */
@view-transition{ navigation: auto }

/* Rollen-Klassen statisch */
.card .thumb  { view-transition-class: card-img; }
.card h3      { view-transition-class: card-title; }
.card p       { view-transition-class: card-body; }

/* Gehoverte/fokussierte Karte trägt die geteilten Namen —
   immer nur eine gleichzeitig aktiv, keine Kollision. */
.card:hover .thumb, .card:focus .thumb { view-transition-name: shared-img; }
.card:hover h3,     .card:focus h3     { view-transition-name: shared-title; }
.card:hover p,      .card:focus p      { view-transition-name: shared-body; }

/* Eine Regel je Rolle: */
::view-transition-group(.card-img),
::view-transition-group(.card-title),
::view-transition-group(.card-body){
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.7, 0, .2, 1);
}