CSS-Kurs / Transformationen und Transitions

Transformationen verschieben, drehen oder skalieren das gerenderte Erscheinungsbild eines Elements, ohne den umgebenden Inhalt neu anzuordnen. Übergänge animieren eine Änderung zwischen Eigenschaftswerten, daher wählen Sie die Eigenschaften und die Zeitsteuerung bewusst aus und bieten Sie eine Alternative für reduzierte Bewegung an.

Verstehen Sie Transformationen und den normalen Fluss

Der Dokumentfluss bezieht sich auf die Beziehung zwischen dem Ort, an dem ein Element ursprünglich platziert ist, und den umliegenden Elementen. Selbst wenn Sie den Button nach oben zu translateY(-.5rem) verschieben, bewegt sich der darunterliegende Absatz nicht entsprechend des Raums, an den der Button verschoben wurde. Transformierte Elemente können den umgebenden Inhalt überlappen oder vom Bildschirm verschwinden, daher hat es Priorität, in ihrer ursprünglichen Platzierung genug Platz zu lassen, anstatt die Bewegungsdistanz zu vergrößern.

Nur weil die Größe größer erscheint, bedeutet das nicht, dass der Platz, den die Box vor der Umwandlung einnimmt, größer sein wird. Überprüfen Sie die Raster- oder Breiten-Eigenschaften, um die tatsächliche Spaltenbreite der Karte zu ändern, oder Transformieren, um einen etwas größeren visuellen Effekt beim Drücken zu erzeugen. Nicht ersetzte Inline-Boxen, wie einfacher Text span, werden nicht transformiert, geben Sie daher bei Bedarf display: inline-block an. Definitionen von Transformationszielen und Koordinatenverarbeitung finden Sie im MDN Transformationsdokument.

Vergleichen Sie Transformationsreihenfolge und Ursprung

Wenn Sie Transformationsfunktionen auflisten, beeinflusst jede Funktion das Koordinatensystem, das von der nächsten Funktion verwendet wird. Daher sind Translation/Rotation und Rotation/Translation im Allgemeinen nicht dasselbe Ergebnis. Im untenstehenden Beispiel ist A's gedrehte Box dort sichtbar, wo sie nach rechts verschoben wurde, und B's Box hat sich in die durch die Rotation beeinflusste Richtung bewegt und ist weiter unten sichtbar. Schauen Sie nicht nur auf den Funktionsnamen und nehmen Sie an, dass die beiden Ergebnisse gleich sind; vergleichen Sie ihre tatsächlichen Positionen.

Das Zentrum der Drehung und Vergrößerung ist auf transform-origin gesetzt. Wenn Sie stattdessen left top als Zentrum verwenden, dreht es sich um die obere linke Ecke. Dies ist nützlich, wenn Sie einen spezifischen Punkt fixieren möchten, zum Beispiel beim Öffnen eines Menüs, aber die Überlappung mit dem umgebenden Inhalt kann sich allein durch Ändern des Bezugspunkts ändern.

Speichern Sie den folgenden Code als transform-compare.html in UTF-8 und öffnen Sie ihn in Ihrem Browser. Es werden keine externen Dateien oder Bibliotheken benötigt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Transform order and origin</title>
  <style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #183044; font-family: sans-serif; line-height: 1.6; }
main { max-width: 46rem; margin-inline: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #164f73; outline-offset: 3px; }
.comparisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.slot { padding: 1rem; border: 1px solid #8a9ba7; }
.frame { height: 9rem; display: grid; place-items: center; background: #f0f2f4; }
.box { width: 4rem; height: 2rem; display: grid; place-items: center; background: #166b92; color: white; }
.first { transform: translateX(2rem) rotate(45deg); }
.second { transform: rotate(45deg) translateX(2rem); }
.center { transform: rotate(30deg); transform-origin: center; }
.corner { transform: rotate(30deg); transform-origin: left top; }
  </style>
</head>
<body>
<main>
<h1>The same value also varies depending on the order and reference point</h1>
<div class="comparisons">
  <section class="slot"><h2>Translate, then rotate</h2><div class="frame"><div class="box first">A</div></div></section>
  <section class="slot"><h2>Rotate, then translate</h2><div class="frame"><div class="box second">B</div></div></section>
  <section class="slot"><h2>Center origin</h2><div class="frame"><div class="box center">C</div></div></section>
  <section class="slot"><h2>Top-left origin</h2><div class="frame"><div class="box corner">D</div></div></section>
</div>
</main>
</body>
</html>

1. Vergleichen Sie die Positionen von A und B. Wenn Sie die Funktionsreihenfolge von .second so ändern, dass sie derselben wie A entspricht, werden die relativen Positionen der beiden Kästen gleich sein. Nach der Bestätigung stellen Sie sie in die ursprüngliche Reihenfolge zurück.
2. C und D haben denselben Rotationswinkel. Ändern Sie nur transform-origin von .corner zu center, überprüfen Sie den Unterschied in den Bezugspunkten und stellen Sie auf left top zurück.
3. Vergleichen Sie die Vergrößerung, indem Sie nur die Rotation von C auf scale(1.2) ändern. Der Bereich außerhalb des Rahmens wird größer, aber der umgebende Bereich wird nicht verschoben. Nach der Überprüfung auf rotate(30deg) zurücksetzen.

Wählen Sie Übergangseigenschaften und Timing

transition ändert seinen Zustand nicht von selbst. Die Änderung beginnt nur, wenn sich der CSS-Wert beim Hover, Fokus oder Klassenwechsel ändert. Gibt den Eigenschaftsnamen an, der beeinflusst werden soll, die Dauer, die Fortschrittskurve und die Startverzögerung; wenn die Verzögerung weggelassen wird, beträgt sie standardmäßig 0 Sekunden.

transition: transform 180ms ease 0ms, background-color 180ms ease 0ms;

Hier ist 180ms 0,18 Sekunden, und ease ist eine Kurve, die den Anfang und das Ende sanft verbindet, anstatt nur mit derselben Geschwindigkeit fortzufahren. linear ändert sich mit konstanter Geschwindigkeit. Verwenden Sie zunächst kurze Zeiten ohne Verzögerung und passen Sie sie bei Bedarf an. Das Hinzufügen einer langen Verzögerung zu einem scheinbar nicht reagierenden Button kann es schwierig machen, die Ergebnisse Ihrer Aktionen zu bemerken.

transition auf die Basisregel zu setzen, erlaubt es, sowohl beim Ein- als auch beim Aussteigen zu wirken. Eine nur auf :hover deklarierte Transition verschwindet, wenn das Hover endet, und kann eine andere Rückkehr erzeugen. Benennen Sie die Eigenschaften gezielt, anstatt all zu verwenden. Dieses Beispiel transitioniert transform und background-color; nicht jede Eigenschaft interpoliert auf die gleiche Weise. Für weitere Details siehe MDN Übergangs-Dokument.

Testen des Hover- und Tastaturfokus

Speichern Sie den folgenden Code als transition-state.html. Wenn Sie mit der Maus über die Schaltfläche fahren oder die Tabulatortaste verwenden, bewegt sich die Schaltfläche nach oben und ihre Hintergrundfarbe ändert sich. Fokuspunkte sind einzeln dunkelblau umrandet. Die Schaltfläche dient nur Übungszwecken, um Zustandsänderungen zu beobachten, und es wird nach dem Drücken der Schaltfläche keine zusätzliche Aktion ausgeführt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Transforms and state transitions exercise</title>
  <style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #183044; font-family: sans-serif; line-height: 1.6; }
main { max-width: 46rem; margin-inline: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #164f73; outline-offset: 3px; }
.stage { padding: 2rem 1rem; border: 2px dashed #8a9ba7; }
.action { padding: .75rem 1.25rem; border: 1px solid #166b92; border-radius: .4rem;
  color: #183044; background: #eaf4fa; transform: translateY(0);
  transition: transform 180ms ease, background-color 180ms ease; }
.action:hover, .action:focus-visible { transform: translateY(-.5rem); background: #cfe8f4; }
.neighbor { margin-block: 1rem 0; padding: .75rem; background: #f0f2f4; }
@media (prefers-reduced-motion: reduce) {
  .action { transition: none; }
  .action:hover, .action:focus-visible { transform: none; }
}
  </style>
</head>
<body>
<main>
<h1>The paragraph stays in place as the button moves</h1>
<p>Hover over the button or press Tab to focus it.</p>
<div class="stage">
  <button class="action" type="button">Check state</button>
  <p class="neighbor">This paragraph stays in place when the button is transformed.</p>
</div>
</main>
</body>
</html>

1. Merken Sie sich die obere Position des unten stehenden Absatzes und fahren Sie mit der Maus über die Schaltfläche. Nur die Schaltflächen bewegen sich, und die Absätze bleiben an derselben Stelle.
2. Ändern Sie die Dauer an zwei Stellen von 180ms zu 800ms, um das Ein- und Zurücktreten zu beobachten, und kehren Sie dann zum ursprünglichen Wert zurück.
3. Lassen Sie die Zeit wie sie ist und ändern Sie nur die Fortschrittskurve zu linear zum Vergleich. Dann stellen Sie sie auf ease zurück.
4. Fügen Sie nur eine 400ms-Verzögerung am Ende des ersten transition-Eintrags für transform hinzu. Die Hintergrundfarbe beginnt ohne diese Verzögerung zu wechseln, die Bewegung erst später. Entfernen Sie die Verzögerung nach dem Vergleich.
5. Fokussieren Sie die Schaltfläche mit der Tab-Taste und verlassen Sie sie mit Shift+Tab. Stellen Sie sicher, dass die Fokusrandlinie und die Hintergrundfarbe den Bedienzustand beschreiben.

Reduzieren Sie die Bewegung und prüfen Sie Nebenwirkungen

Wenn der Benutzer die Reduzierung von Bewegung eingestellt hat, wird die prefers-reduced-motion: reduce-Bedingung die Bewegung eliminieren und nur die Hintergrundfarbe und Fokusmarkierungen übriglassen. Wenn Sie nur die Übergänge entfernen, erfolgt die Änderung sofort, aber die endgültige Position, zu der Sie sich bewegt haben, bleibt bestehen. Im obigen Beispiel haben wir entschieden, dass dekorative Bewegung selbst nicht notwendig ist, sodass sogar die Hover- und Fokus-Transformationen auf none geändert wurden. Bitte beziehen Sie sich auf den Leitfaden zur Einstellung der Bewegungsreduktion MDN.

Vergleichen Sie die beiden Zustände, indem Sie Ihre Betriebssystemeinstellungen ändern oder die Medieneigenschaften im Rendering-Bedienfeld der Entwicklerwerkzeuge Ihres Browsers reproduzieren. Im reduzierten Zustand sollte sich die Schaltfläche nicht bewegen, nur die Farbe und der Fokusindikator sollten sich ändern. Wenn Sie das Labor abgeschlossen haben, stellen Sie die Emulation in ihren Standardzustand zurück.

Ein von none verschiedenes transform erstellt einen Stapelkontext und kann den enthaltenen Block für absolute- und fixed-Nachkommen festlegen. Wenn ein Popup oder ein feststehendes Element sich unerwartet verhält, untersuchen Sie transformierte Vorfahren. Überprüfen Sie auch Überlappung, Tastaturfokus und reduzierte Bewegung; eine sanfte Übergangsanimation allein stellt kein nutzbares Layout her. Siehe CSS position: relative, absolute, fixed, und sticky, z-index und Stapelkontexte.