Artikel mit Schlagwort

Vom 11. bis 13. Juni hielt die CSS Working Group (CSSWG) ihr zweites persönliches Treffen des Jahres in Coruña, Spanien, ab – mit einer langen Agenda an neuen Funktionen und Verbesserungen für die Sprache. Wenn uns 2023 bereits unglaubliche Fortschritte gebracht hat wie …

Das CSS-Pseudoelement ::view-transition-image-pair ist Teil der View Transitions API, mit dem wir die „Vorher-Nachher“-Snapshots in einem Ansichtsübergang auswählen können.

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

Das CSS-Pseudoelement ::view-transition-image-new ist Teil der View Transitions API, mit dem wir den „neuen“ Snapshot auswählen können, zu dem in einem Ansichtsübergang gewechselt wird.

::view-transition-image-new(*) {
  animation-duration: 700ms;
}

Das CSS-Pseudoelement ::view-transition-image-old ist Teil der View Transitions API, mit dem wir den „Vorher“-Snapshot in einem Ansichtsübergang auswählen können.

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

Das Pseudoelement ::view-transition-group wählt einen oder mehrere Container aus, die die Teile eines einzelnen Ansichtsübergangs gruppieren.

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

Siehst du den Bezeichner transition-name im Argument des Pseudoelements? Auf diese Weise können wir einen bestimmten Ansichtsübergang auswählen. View …

Das CSS-Pseudoelement ::view-transition ist die oberste Ebene – oder der „Root“ – und enthält alle animierten Übergänge, die als CSS-View-Transitions auf der Seite definiert sind.

::view-transition {
  position: fixed;
  inset: 0;
}

Die CSS-Eigenschaft view-timeline-name ermöglicht es uns, ein Element zu identifizieren und zu referenzieren, das wir basierend auf seiner Scrollposition animieren möchten, wenn es in den sichtbaren Bereich (d. h. den Scrollport) eines Scroll-Containers (auch „Quelle“ genannt) eintritt.

.element {
  view-timeline-name: 

Die CSS-Eigenschaft view-transition-name identifiziert eindeutig ein Element, das in einem Ansichtsübergang verwendet werden kann.

card {
  view-transition-name: card-transition;
}

Wir geben dem Element einen Namen (d. h. <custom-ident), auf den wir verweisen, oder setzen die Eigenschaft auf none, um …

@view-transition {
  navigation: auto;
}

Das kommt direkt in dein Stylesheet und ist der absolut einfachste der einfachen Ansichtsübergänge. Der Effekt ist eine Überblendung zwischen zwei Seiten.

Das Chrome-Team hatte ursprünglich ein Meta-Tag veröffentlicht, mit dem wir …