Animating with Clip-Path

clip-path ist eine dieser CSS-Eigenschaften, von denen wir im Allgemeinen wissen, dass sie existieren, sie aber aus irgendeinem Grund vielleicht nicht oft nutzen. Sie ist ein wenig einschüchternd, da sie sich wie Matheunterricht anfühlt, da sie mit geometrischen Formen arbeitet, die jeweils unterschiedliche Werte haben, um bestimmte Formen auf bestimmte Weise zu zeichnen.

Wir werden uns in diesem Artikel intensiv mit clip-path beschäftigen und uns speziell damit befassen, wie wir damit ziemlich komplexe Animationen erstellen können. Ich hoffe, Sie werden sehen, wie fantastisch die Eigenschaft und ihre formverändernden Kräfte sein können.

Aber zuerst eine kurze Wiederholung dessen, womit wir arbeiten.

Crashkurs Clip-Path

Nur zur schnellen Erklärung, was clip-path ist und was es bietet, beschreibt MDN es so

Die CSS-Eigenschaft clip-path erstellt eine Clipping-Region, die festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb der Region befinden, werden angezeigt, während Teile außerhalb verborgen sind.

Betrachten Sie die von clip-path bereitgestellte Form circle. Sobald der Kreis definiert ist, kann der Bereich darin als „positiv“ und der Bereich außerhalb als „negativ“ betrachtet werden. Der positive Bereich wird gerendert, während der negative Bereich entfernt wird. Die Tatsache, dass dieses Verhältnis zwischen positivem und negativem Raum animiert werden kann, bietet interessante Übergangseffekte ... worauf wir gleich eingehen werden.

clip-path bietet von Haus aus vier Formen, plus die Möglichkeit, eine URL zu verwenden, um eine Quelle für ein anderes SVG <clipPath>-Element anzugeben. Ich überlasse dem CSS-Tricks Almanac die detailliertere Erklärung, aber hier sind Beispiele für diese ersten vier Formen.

Form	Beispiel	Ergebnis
Kreis	clip-path: circle(25% at 25% 25%);
Ellipse	clip-path: ellipse(25% 50% at 25% 50%);
Einrücken	clip-path: inset(10% 20% 30% 40% round 25%);
Polygon	clip-path: polygon(50% 25%, 75% 75%, 25% 75%);

Kombination von Ausschnitten mit CSS-Übergängen

Das Animieren von clip-path kann so einfach sein wie das Ändern der Eigenschaftswerte von einer Form zur anderen mithilfe von CSS-Übergängen, die entweder durch Ändern von Klassen in JavaScript oder durch eine interaktive Zustandsänderung wie :hover ausgelöst werden.

.box {
  clip-path: circle(75%);
  transition: clip-path 1s;
}

.box:hover {
  clip-path: circle(25%);
}

Siehe den Pen
clip-path mit Übergang von Geoff Graham (@geoffgraham)
auf CodePen.

Wir können auch CSS-Animationen verwenden

@keyframes circle {
  0% { clip-path: circle(75%); }
  100% { clip-path: circle(25%); }
}

Siehe den Pen
clip-path mit CSS-Animation von Geoff Graham (@geoffgraham)
auf CodePen.

Einige Dinge, die bei der Animation von clip-path zu beachten sind

• Sie beeinflusst nur, was gerendert wird, und ändert nicht die Boxgröße des Elements in Bezug auf umgebende Elemente. Zum Beispiel wird eine geflossene Box mit umfließendem Text immer noch den gleichen Platz einnehmen, auch wenn ein sehr kleiner prozentualer clip-path angewendet wird.
• Alle CSS-Eigenschaften, die über die Boxgröße des Elements hinausgehen, können abgeschnitten werden. Zum Beispiel entfernt ein inset von 0 % für alle vier Seiten, der am Rand des Elements abschneidet, einen box-shadow und erfordert einen negativen Prozentsatz, um den box-shadow zu sehen. Allerdings könnte das an sich schon interessante Effekte erzielen!

Okay, legen wir mit ein paar leichten Animationen los, um den Anfang zu machen.

Vergleich der einfachen Formen

Ich habe eine Demo zusammengestellt, in der Sie jede Form in Aktion sehen können, zusammen mit einer kleinen Erklärung, was passiert.

Siehe den Pen
Animieren von Clip-Path: Einfache Formen von Travis Almand (@talmand)
auf CodePen.

Die Demo verwendet Vue für die Funktionalität, aber die CSS ist leicht auf jeden anderen Projekttyp übertragbar.

Wir können diese etwas genauer aufschlüsseln, um ein Verständnis für die Werte jeder Form und wie deren Änderung die Bewegung beeinflusst zu bekommen.

Kreis

clip-path: circle(<length|percentage> at <position>);

Kreis akzeptiert zwei Eigenschaften, die animiert werden können

1. Formradius: kann eine Länge oder ein Prozentsatz sein
2. Position: kann eine Länge oder ein Prozentsatz entlang der x- und y-Achse sein

.circle-enter-active { animation: 1s circle reverse; }
.circle-leave-active { animation: 1s circle; }

@keyframes circle {
  0% { clip-path: circle(75%); }
  100% { clip-path: circle(0%); }
}

Die Kreisform wird im Leave-Übergang von einem anfänglichen Radius von 75 % (gerade genug, um das Element vollständig erscheinen zu lassen) auf 0 % verkleinert. Da keine Position festgelegt ist, wird der Kreis standardmäßig sowohl vertikal als auch horizontal auf die Mitte des Elements gesetzt. Der Enter-Übergang spielt die Animation umgekehrt ab, mittels des Schlüsselworts „reverse“ in der Animationseigenschaft.

Ellipse

clip-path: ellipse(<length|percentage>{2} at <position>);

Ellipse akzeptiert drei Eigenschaften, die animiert werden können

1. Formradius: kann eine Länge oder ein Prozentsatz auf der horizontalen Achse sein
2. Formradius: kann eine Länge oder ein Prozentsatz auf der vertikalen Achse sein
3. Position: kann eine Länge oder ein Prozentsatz entlang der x- und y-Achse sein

.ellipse-enter-active { animation: 1s ellipse reverse; }
.ellipse-leave-active { animation: 1s ellipse; }

@keyframes ellipse {
  0% { clip-path: ellipse(80% 80%); }
  100% { clip-path: ellipse(0% 20%); }
}

Die Ellipsenform wird im Leave-Übergang von anfänglich 80 % mal 80 %, was ihr eine kreisförmige Form gibt, die größer als die Box ist, auf 0 % mal 20 % verkleinert. Da keine Position festgelegt ist, wird die Ellipse standardmäßig sowohl vertikal als auch horizontal auf die Mitte der Box gesetzt. Der Enter-Übergang spielt die Animation umgekehrt ab, mittels des Schlüsselworts „reverse“ in der Animationseigenschaft.

Der Effekt ist ein schrumpfender Kreis, der sich zu einer schrumpfenden, höheren als breiten Ellipse wandelt und das erste Element wegwischt. Dann wechseln die Elemente, wobei das zweite Element innerhalb der wachsenden Ellipse erscheint.

Einrücken

clip-path: inset(<length|percentage>{1,4} round <border-radius>{1,4});

Die Inset-Form hat bis zu fünf Eigenschaften, die animiert werden können. Die ersten vier repräsentieren jede Kante der Form und verhalten sich ähnlich wie Ränder oder Abstände. Die erste Eigenschaft ist erforderlich, während die nächsten drei optional sind, abhängig von der gewünschten Form.

1. Länge/Prozentsatz: kann alle vier Seiten, Ober-/Unterseiten oder die Oberseite repräsentieren
2. Länge/Prozentsatz: kann linke/rechte Seiten oder die rechte Seite repräsentieren
3. Länge/Prozentsatz: repräsentiert die Unterseite
4. Länge/Prozentsatz: repräsentiert die linke Seite
5. Randradius: erfordert das Schlüsselwort „round“ vor dem Wert

Eine Sache, die man beachten sollte, ist, dass die verwendeten Werte umgekehrt zu ihrer üblichen CSS-Verwendung sind. Ein Rand mit Null zu definieren bedeutet, dass nichts verändert wurde, die Form wird nach außen zur Seite des Elements gedrückt. Wenn die Zahl erhöht wird, z. B. auf 10 %, wird der Rand der Form nach innen von der Seite des Elements weg gedrückt.

.inset-enter-active { animation: 1s inset reverse; }
.inset-leave-active { animation: 1s inset; }

@keyframes inset {
  0% { clip-path: inset(0% round 0%); }
  100% { clip-path: inset(50% round 50%); }
}

Die Inset-Form wird im Leave-Übergang von einem vollflächigen Quadrat zu einem Kreis verkleinert, da sich die abgerundeten Ecken von 0 % auf 50 % ändern. Ohne den „round“-Wert würde sie als schrumpfendes Quadrat erscheinen. Der Enter-Übergang spielt die Animation umgekehrt ab, mittels des Schlüsselworts „reverse“ in der Animationseigenschaft.

Der Effekt ist ein schrumpfendes Quadrat, das sich zu einem schrumpfenden Kreis wandelt und das erste Element wegwischt. Nachdem die Elemente gewechselt haben, erscheint das zweite Element innerhalb des wachsenden Kreises, der sich zu einem wachsenden Quadrat wandelt.

Polygon

clip-path: polygon(<length|percentage>);

Die Polygonform ist ein Sonderfall in Bezug auf die Eigenschaften, die sie animieren kann. Jede Eigenschaft repräsentiert Eckpunkte der Form und mindestens drei sind erforderlich. Die Anzahl der Eckpunkte über die erforderlichen drei hinaus ist nur durch die Anforderungen der gewünschten Form begrenzt. Für jeden Keyframe einer Animation oder die beiden Schritte eines Übergangs muss die Anzahl der Eckpunkte immer übereinstimmen, um eine reibungslose Animation zu erzielen. Eine Änderung der Anzahl der Eckpunkte kann animiert werden, führt aber bei jedem Keyframe zu einem Pop-in- oder Pop-out-Effekt.

.polygon-enter-active { animation: 1s polygon reverse; }
.polygon-leave-active { animation: 1s polygon; }

@keyframes polygon {
  0% { clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%); }
  100% { clip-path:  polygon(50% 50%, 50% 25%, 50% 50%, 75% 50%, 50% 50%, 50% 75%, 50% 50%, 25% 50%); }
}

Die acht Eckpunkte der Polygonform ergeben ein Quadrat mit einem Eckpunkt in jeder Ecke und einem in der Mitte jeder der vier Seiten. Im Leave-Übergang animieren sich die Ecken der Form nach innen zur Mitte, während die Mittelpunkte der Seiten sich auf halbem Weg zur Mitte hineinbewegen. Der Enter-Übergang spielt die Animation umgekehrt ab, mittels des Schlüsselworts „reverse“ in der Animationseigenschaft.

Der Effekt ist ein Quadrat, das sich nach innen zu einer Plusform kollabiert, die das Element wegwischt. Dann wechseln die Elemente, wobei das zweite Element in einer wachsenden Plusform erscheint, die sich zu einem Quadrat erweitert.

Kommen wir zu einigen einfachen Bewegungen

Okay, wir werden die Dinge jetzt etwas aufdrehen, da wir die Grundlagen hinter uns gelassen haben. Diese Demo zeigt verschiedene Möglichkeiten, Bewegung in einer clip-path-Animation zu erzeugen. Die Kreis- und Ellipsenformen bieten eine einfache Möglichkeit, Bewegung über die Position der Form zu animieren. Die Inset- und Polygonformen können so animiert werden, dass sie den Anschein von positionsbasierten Bewegungen erwecken.

Siehe den Pen
Animieren von Clip-Path: Einfache Bewegungen von Travis Almand (@talmand)
auf CodePen.

Schlüsseln wir diese wie zuvor auf.

Slide Down

Der Slide-Down-Übergang besteht aus zwei verschiedenen Animationen, die die Inset-Form verwenden. Die erste, die Leave-Animation, animiert den oberen Wert der Inset-Form von 0 % auf 100 % und erzeugt so den Eindruck, dass das gesamte Quadrat nach unten aus dem Bild gleitet. Die zweite, die Enter-Animation, hat den unteren Wert bei 100 % und animiert ihn dann nach unten in Richtung 0 %, wodurch der Eindruck entsteht, dass das gesamte Quadrat nach unten ins Bild gleitet.

.down-enter-active { animation: 1s down-enter; }
.down-leave-active { animation: 1s down-leave; }

@keyframes down-enter {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

@keyframes down-leave {
  0% { clip-path: inset(0); }
  100% { clip-path: inset(100% 0 0 0); }
}

Wie Sie sehen können, müssen die Anzahl der im Inset-Pfad definierten Seiten nicht übereinstimmen. Wenn die Form das volle Quadrat sein soll, ist ein einzelnes Null ausreichend. Sie kann dann zum neuen Zustand animiert werden, auch wenn die Anzahl der definierten Seiten auf vier steigt.

Box-Wipe

Der Box-Wipe-Übergang besteht aus zwei Animationen, die wiederum die Inset-Form verwenden. Die erste, die Leave-Animation, animiert das gesamte Quadrat zu einem halbgroßen Quadrat, das auf der linken Seite des Elements positioniert ist. Das kleinere Quadrat gleitet dann nach rechts aus dem Blickfeld. Die zweite, die Enter-Animation, animiert ein ähnliches halbgroßes Quadrat von links über die rechte Seite des Elements ins Bild. Dann dehnt es sich nach außen aus, um das gesamte Element freizulegen.

.box-wipe-enter-active { animation: 1s box-wipe-enter; }
.box-wipe-leave-active { animation: 1s box-wipe-leave; }

@keyframes box-wipe-enter {
  0% { clip-path: inset(25% 100% 25% -50%); }
  50% { clip-path: inset(25% 0% 25% 50%); }
  100% { clip-path: inset(0); }
}

@keyframes box-wipe-leave {
  0% { clip-path: inset(0); }
  50% { clip-path: inset(25% 50% 25% 0%); }
  100% { clip-path: inset(25% -50% 25% 100%); }
}

Wenn das vollständige Element angezeigt wird, ist der Einzug auf Null. Die 50 %-Keyframes definieren ein halbgroßes Quadrat, das entweder links oder rechts platziert wird. Es gibt zwei Werte, die die linken und rechten Ränder repräsentieren und vertauscht sind. Dann wird das Quadrat zur gegenüberliegenden Seite verschoben. Während eine Seite auf 100 % geschoben wird, muss die andere auf -50 % gehen, um die Form beizubehalten. Wenn sie auf Null statt auf -50 % animiert würde, würde das Quadrat beim Überqueren schrumpfen, anstatt aus dem Bild zu gleiten.

Drehen

Der Rotationsübergang ist eine Animation mit fünf Keyframes, die die Polygonform verwendet. Der anfängliche Keyframe definiert das Polygon mit vier Eckpunkten, die das gesamte Element anzeigen. Dann ändert der nächste Keyframe die x- und y-Koordinaten jedes Eckpunkts, um sie nach innen und nahe zum nächsten Eckpunkt in einer uhrzeigersinnigen Richtung zu bewegen. Nachdem alle vier Eckpunkte übergegangen sind, scheint sich das Quadrat verkleinert und eine Vierteldrehung gedreht zu haben. Die folgenden Keyframes tun dasselbe, bis sich das Quadrat auf die Mitte des Elements verkleinert hat. Der Leave-Übergang spielt die Animation normal ab, während der Enter-Übergang die Animation umgekehrt abspielt.

.rotate-enter-active { animation: 1s rotate reverse; }
.rotate-leave-active { animation: 1s rotate; }

@keyframes rotate {
  0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  25% { clip-path: polygon(87.5% 12.5%, 87.5% 87.5%, 12.5% 87.5%, 12.5% 12.5%); }
  50% { clip-path: polygon(75% 75%, 25% 75%, 25% 25%, 75% 25%); }
  75% { clip-path: polygon(37.5% 62.5%, 37.5% 37.5%, 62.5% 37.5%, 62.5% 62.5%); }
  100% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
}

Polygone können in jede andere Position animiert werden, sobald ihre Eckpunkte festgelegt wurden, solange jeder Keyframe die gleiche Anzahl von Eckpunkten hat. Dies kann bei sorgfältiger Planung zu vielen interessanten Effekten führen.

Spotlight

Der Spotlight-Übergang ist eine Animation mit fünf Keyframes, die die Kreisform verwendet. Der anfängliche Keyframe definiert einen vollformatigen Kreis in der Mitte, um das gesamte Element anzuzeigen. Der nächste Keyframe verkleinert den Kreis auf zwanzig Prozent. Jeder nachfolgende Keyframe animiert die Positionswerte des Kreises, um ihn zu verschiedenen Punkten auf dem Element zu bewegen, bis er nach links aus dem Bild verschwindet. Der Leave-Übergang spielt die Animation normal ab, während der Enter-Übergang die Animation umgekehrt abspielt.

.spotlight-enter-active { animation: 2s spotlight reverse; }
.spotlight-leave-active { animation: 2s spotlight; }

@keyframes spotlight {
  0% { clip-path: circle(100% at 50% 50%); }
  25% { clip-path: circle(20% at 50% 50%); }
  50% { clip-path: circle(20% at 12% 84%); }
  75% { clip-path: circle(20% at 93% 51%); }
  100% { clip-path: circle(20% at -30% 20%); }
}

Das mag auf den ersten Blick eine komplex aussehende Animation sein, aber sie erfordert nur einfache Änderungen in jedem Keyframe.

Abenteuerlicheres Zeug

Wie bei den Beispielen für Formen und einfache Bewegungen habe ich eine Demo erstellt, die komplexere Animationen enthält. Wir werden diese einzeln aufschlüsseln.

Siehe den Pen
Animieren von Clip-Path: Komplexe Formen von Travis Almand (@talmand)
auf CodePen.

Alle diese Beispiele nutzen die Polygonform intensiv. Sie nutzen Funktionen wie das Stapeln von Eckpunkten, um Elemente „verschweißt“ erscheinen zu lassen, und das Neupositionieren von Eckpunkten für die Bewegung.

Schauen Sie sich Ana Tudors Artikel „Cutting out the inner part of an element using clip-path“ an, um ein detaillierteres Beispiel zu erhalten, das die Polygonform zur Erstellung komplexer Formen verwendet.

Chevron

Der Chevron-Übergang besteht aus zwei Animationen, jede mit drei Keyframes. Der Leave-Übergang beginnt als vollständiges Quadrat mit sechs Eckpunkten; es gibt die vier Ecken, aber zusätzliche zwei Eckpunkte auf der linken und rechten Seite. Der zweite Keyframe animiert drei der Eckpunkte an ihren Platz, um das Quadrat in einen Chevron zu verwandeln. Der dritte Keyframe bewegt die Eckpunkte dann aus dem Bild nach rechts. Nachdem die Elemente gewechselt haben, beginnt der Enter-Übergang mit der gleichen Chevron-Form, die sich jedoch aus dem Bild links befindet. Der zweite Keyframe bewegt den Chevron ins Bild und der dritte Keyframe stellt das vollständige Quadrat wieder her.

.chevron-enter-active { animation: 1s chevron-enter; }
.chevron-leave-active { animation: 1s chevron-leave; }

@keyframes chevron-enter {
  0% { clip-path: polygon(-25% 0%, 0% 50%, -25% 100%, -100% 100%, -75% 50%, -100% 0%); }
  75% { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
  100% { clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%); }
}

@keyframes chevron-leave {
  0% { clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%); }
  25% { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
  100% { clip-path: polygon(175% 0%, 200% 50%, 175% 100%, 100% 100%, 125% 50%, 100% 0%) }
}

Spirale

Der Spiralübergang ist ein starkes Beispiel für eine komplizierte Reihe von Eckpunkten in der Polygonform. Das Polygon ist so konzipiert, dass es eine Form definiert, die von links oben im Element spiralförmig nach innen verläuft. Da die Eckpunkte Linien erzeugen, die übereinander liegen, erscheint alles als ein einzelnes Quadrat. Über die acht Keyframes der Animation hinweg werden die Eckpunkte so verschoben, dass sie auf den benachbarten Eckpunkten liegen. Dadurch scheint sich die Form gegen den Uhrzeigersinn nach links oben abzuwickeln und das Element während des Leave-Übergangs zu überdecken. Der Enter-Übergang spielt die Animation umgekehrt ab.

.spiral-enter-active { animation: 1s spiral reverse; }
.spiral-leave-active { animation: 1s spiral; }

@keyframes spiral {  
  0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 50%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }
  14.25% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 75%, 50% 75%, 50% 50%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }
  28.5% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 50%, 50% 50%, 50% 50%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }
  42.75% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 25% 25%, 25% 50%, 25% 50%, 25% 50%, 25% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }
  57% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }
  71.25% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 25%, 0% 25%); }
  85.5% { clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 0% 25%); }
  100% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%); }
}

Slots

Der Slots-Übergang besteht aus einer Reihe von Eckpunkten, die in einem Muster vertikaler Schlitze angeordnet sind, wobei die Eckpunkte übereinander gestapelt sind, um ein vollständiges Quadrat zu bilden. Die allgemeine Idee ist, dass die Form im oberen linken Bereich beginnt und der nächste Eckpunkt 14 % nach rechts versetzt ist. Der nächste Eckpunkt befindet sich an exakt derselben Stelle. Dann ist der nächste Eckpunkt weitere 14 % nach rechts versetzt und so weiter, bis die obere rechte Ecke erreicht ist. Dies erzeugt eine Reihe von „Abschnitten“ entlang der Oberseite der Form, die horizontal ausgerichtet sind. Der zweite Keyframe animiert dann jeden geraden Abschnitt nach unten zum Boden des Elements. Dies erweckt den Eindruck von vertikalen Schlitzen, die ihre Teile des Elements wegwischen. Der dritte Keyframe bewegt dann die verbleibenden Abschnitte an der Oberseite zum Boden. Insgesamt wischt der Leave-Übergang die Hälfte des Elements in vertikalen Schlitzen und dann die andere Hälfte weg. Der Enter-Übergang kehrt die Animation um.

.slots-enter-active { animation: 1s slots reverse; }
.slots-leave-active { animation: 1s slots; }

@keyframes slots {
  0% {
    clip-path: polygon(0% 0%, 14% 0%, 14% 0%, 28% 0%, 28% 0%, 42% 0%, 42% 0%, 56% 0%, 56% 0%, 70% 0%, 70% 0%, 84% 0%, 84% 0%, 100% 0, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon(0% 0%, 14% 0%, 14% 100%, 28% 100%, 28% 0%, 42% 0%, 42% 100%, 56% 100%, 56% 0%, 70% 0%, 70% 100%, 84% 100%, 84% 0%, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0% 100%, 14% 100%, 14% 100%, 28% 100%, 28% 100%, 42% 100%, 42% 100%, 56% 100%, 56% 100%, 70% 100%, 70% 100%, 84% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
}

Rollläden

Der Shutters-Übergang ist dem Slots-Übergang oben sehr ähnlich. Anstatt Abschnitte entlang der Oberseite zu erstellen, erzeugt er vertikale Abschnitte, die nebeneinander angeordnet sind, um das gesamte Quadrat zu bilden. Beginnend mit links oben ist der zweite Eckpunkt an der Oberseite und 20 % nach rechts positioniert. Der nächste Eckpunkt befindet sich horizontal an derselben Stelle, aber am unteren Rand des Elements. Der nächste Eckpunkt danach befindet sich an derselben Stelle, der nächste wieder oben, auf dem Eckpunkt von vor zwei Schritten. Dies wird mehrmals über das Element wiederholt, bis die rechte Seite erreicht ist. Wenn die Linien der Form sichtbar wären, würde sie wie eine Reihe von vertikalen Abschnitten aussehen, die horizontal über das Element aufgereiht sind. Während der Animation wird die linke Seite jedes Abschnitts über die rechte Seite geschoben. Dies erzeugt einen Wisch-Effekt, der wie vertikale Fensterläden aussieht. Der Enter-Übergang spielt die Animation umgekehrt ab.

.shutters-enter-active { animation: 1s shutters reverse; }
.shutters-leave-active { animation: 1s shutters; }

@keyframes shutters {
  0% {
    clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 20% 100%, 20% 0%, 40% 0%, 40% 100%, 40% 100%, 40% 0%, 60% 0%, 60% 100%, 60% 100%, 60% 0%, 80% 0%, 80% 100%, 80% 100%, 80% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(20% 0%, 20% 0%, 20% 100%, 40% 100%, 40% 0%, 40% 0%, 40% 100%, 60% 100%, 60% 0%, 60% 0%, 60% 100%, 80% 100%, 80% 0%, 80% 0%, 80% 100%, 100% 100%, 100% 0%, 100% 0%, 100% 100%, 20% 100%);
  }
}

Stern

Der Sternübergang nutzt die Art und Weise, wie clip-path positiven und negativen Raum rendert, wenn sich die Linien, die die Form definieren, überlappen und kreuzen. Die Form beginnt als Quadrat mit acht Eckpunkten; einer in jeder Ecke und einer in jeder Seite. Es gibt nur drei Keyframes, aber in jedem davon gibt es eine große Bewegung. Der Leave-Übergang beginnt mit dem Quadrat und verschiebt dann jeden Eckpunkt auf einer Seite zur gegenüberliegenden Seite. Daher geht der obere Eckpunkt nach unten, der untere Eckpunkt nach oben, und die Eckpunkte links und rechts tauschen auf die gleiche Weise. Dies erzeugt sich kreuzende Linien, die im positiven Raum eine Sternform bilden. Der letzte Keyframe bewegt dann die Eckpunkte in jeder Ecke zur Mitte der Form, wodurch sich der Stern in sich zusammenzieht und das Element wegwischt. Der Enter-Übergang spielt dasselbe in umgekehrter Reihenfolge ab.

.star-enter-active { animation: 1s star reverse; }
.star-leave-active { animation: 1s star; }

@keyframes star {
  0% {
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
  }
  50% {
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%, 0% 50%, 100% 100%, 50% 0%, 0% 100%, 100% 50%);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 50%, 0% 50%, 50% 50%, 50% 0%, 50% 50%, 100% 50%);
  }
}

Pfadformen

Okay, wir haben uns also viele Beispiele für Animationen mit clip-path-Formfunktionen angesehen. Eine Funktion, mit der wir uns noch nicht beschäftigt haben, ist path. Sie ist vielleicht die flexibelste der Gruppe, da wir damit benutzerdefinierte oder sogar mehrere Formen zeichnen können. Chris hat darüber geschrieben und sogar darüber gesprochen.

Obwohl ich auch für diesen Satz von Beispielen eine Demo erstellt habe, beachten Sie bitte, dass clip-path-Pfade eine experimentelle Technologie sind. Zum Zeitpunkt des Schreibens ist sie nur in Firefox 63 oder höher hinter dem Flag layout.css.clip-path-path.enabled verfügbar, das in about:config aktiviert werden kann.

Siehe den Pen
Animieren von Clip-Path: Pfadformen von Travis Almand (@talmand)
auf CodePen.

Diese Demo zeigt mehrere Verwendungen von Pfaden, die für Übergänge animiert werden. Die Pfade sind vom gleichen Typ wie die Pfade in SVG und können aus dem `path`-Attribut übernommen und in die CSS-Eigenschaft clip-path eines Elements eingefügt werden. Jeder der Pfade in der Demo wurde tatsächlich aus von mir handgezeichneten SVGs für jeden Keyframe der Animationen entnommen. Ähnlich wie bei der Animation mit der Polygonform ist eine sorgfältige Planung erforderlich, da sich die Anzahl der Eckpunkte im Pfad nicht ändern kann, sondern nur manipuliert werden kann.

Ein Vorteil der Verwendung von Pfaden ist, dass sie mehrere Formen innerhalb des Pfades enthalten können, die jeweils separat animiert werden, um eine präzise Kontrolle über den positiven und negativen Raum zu ermöglichen. Ein weiterer interessanter Aspekt ist, dass der Pfad Bézier-Kurven unterstützt. Das Erstellen der Eckpunkte ähnelt der Polygonform, aber Polygon unterstützt keine Bézier-Kurven. Ein Bonus dieser Funktion ist, dass sogar die Kurven animiert werden können.

Allerdings hat ein Nachteil, dass ein Pfad speziell für die Größe des Elements erstellt werden muss. Das liegt daran, dass es keine prozentuale Platzierung gibt, wie wir sie bei den anderen clip-path-Formen haben. Daher sind alle Demos für diesen Artikel Elemente, die 200 Pixel quadratisch sind, und die Pfade in dieser speziellen Demo sind für diese Größe erstellt. Jede andere Größe oder Abmessung führt zu anderen Ergebnissen.

Okay, genug geredet. Kommen wir zu den Beispielen, denn die sind ziemlich süß.

Iris

Der Iris-Übergang besteht aus vier kleinen Formen, die sich zu einer vollständigen großen Form zusammenfügen, die sich wie eine Science-Fiction-Tür in Iris-Muster öffnet. Jede Form hat ihre Eckpunkte so bewegt und leicht gedreht, dass sie sich von der Mitte weg auf ihre jeweilige Seite des Elements bewegen. Dies geschieht mit nur zwei Keyframes. Der Leave-Übergang lässt die Formen aus dem Bild verschwinden, während der Enter-Übergang den Effekt umkehrt. Der Pfad ist so formatiert, dass jede Form im Pfad deutlich erkennbar ist. Jede Zeile, die mit „M“ beginnt, ist eine neue Form im Pfad.

.iris-enter-active { animation: 1s iris reverse; }
.iris-leave-active { animation: 1s iris; }

@keyframes iris {
  0% {
    clip-path: path('
      M103.13 100C103 32.96 135.29 -0.37 200 0L0 0C0.35 66.42 34.73 99.75 103.13 100Z
      M199.35 200C199.83 133.21 167.75 99.88 103.13 100C102.94 165.93 68.72 199.26 0.46 200L199.35 200Z
      M103.13 100C167.46 99.75 199.54 133.09 199.35 200L200 0C135.15 -0.86 102.86 32.47 103.13 100Z
      M0 200C68.63 200 103 166.67 103.13 100C34.36 100.12 -0.02 66.79 0 0L0 200Z
    ');
  }
  100% {
    clip-path: path('
      M60.85 2.56C108.17 -44.93 154.57 -45.66 200.06 0.35L58.64 -141.07C11.93 -93.85 12.67 -45.97 60.85 2.56Z
      M139.87 340.05C187.44 293.16 188.33 246.91 142.54 201.29C95.79 247.78 48.02 247.15 -0.77 199.41L139.87 340.05Z
      M201.68 61.75C247.35 107.07 246.46 153.32 199.01 200.5L340.89 59.54C295.65 13.07 249.25 13.81 201.68 61.75Z
      M-140.61 141.25C-92.08 189.78 -44.21 190.51 3.02 143.46C-45.69 94.92 -46.43 47.05 0.81 -0.17L-140.61 141.25Z
    ');
  }
}

Schmelzen

Der Melt-Übergang besteht aus zwei verschiedenen Animationen für das Ein- und Ausblenden. Im Leave-Übergang ist der Pfad ein Quadrat, aber die obere Seite besteht aus mehreren Bézier-Kurven. Zuerst sind diese Kurven vollständig flach und werden dann nach unten animiert, um jenseits des unteren Rands der Form zu stoppen. Während diese Kurven nach unten wandern, werden sie auf unterschiedliche Weise animiert, so dass jede Kurve anders angepasst wird als die anderen. Dies erweckt den Eindruck, dass das Element unterhalb des unteren Rands wegschmilzt.

Der Enter-Übergang macht im Wesentlichen dasselbe, nur dass sich die Kurven am unteren Rand des Quadrats befinden. Die Kurven beginnen oben und sind vollständig flach. Dann werden sie nach unten animiert, mit denselben Kurvenanpassungen. Dies erweckt den Eindruck, dass das zweite Element von unten ins Bild schmilzt.

.melt-enter-active { animation: 2s melt-enter; }
.melt-leave-active { animation: 2s melt-leave; }

@keyframes melt-enter {
  0% {
    clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.5 -34.5 75 -34.5C87.5 -34.5 87.17 -4.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -16.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');
  }
  100% {
    clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
  }
}

@keyframes melt-leave {
  0% {
    clip-path: path('M0 0C8.33 -8.33 16.67 -12.5 25 -12.5C37.5 -12.5 36.57 -0.27 50 0C63.43 0.27 62.5 -34.37 75 -34.37C87.5 -34.37 87.5 -4.01 100 0C112.5 4.01 112.38 -18.34 125 -18.34C137.62 -18.34 138.09 1.66 150.48 0C162.86 -1.66 162.16 -25 174.54 -25C182.79 -25 191.28 -16.67 200 0L200 200L0 200L0 0Z');
  }
  100% {
    clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');
  }
}

Tür

Der Türübergang ähnelt dem Iris-Übergang, den wir zuerst betrachtet haben – es ist ein „Tür“-Effekt mit Formen, die sich unabhängig voneinander bewegen. Der Pfad besteht aus vier Formen: zwei Halbkreise oben und unten, während die anderen beiden den verbleibenden positiven Raum teilen. Dies zeigt, dass nicht nur jede Form im Pfad separat animiert werden kann, sondern sie können auch vollständig unterschiedliche Formen sein.

Im Leave-Übergang bewegen sich die Formen vom Zentrum weg aus ihrem jeweiligen Bereich heraus. Der obere Halbkreis bewegt sich nach oben und hinterlässt ein Loch, und der untere Halbkreis tut dasselbe. Die linke und rechte Seite gleiten dann in einem separaten Keyframe davon. Dann kehrt der Enter-Übergang einfach die Animation um.

.door-enter-active { animation: 1s door reverse; }
.door-leave-active { animation: 1s door; }

@keyframes door {
  0% {
    clip-path: path('
      M0 0C16.03 0.05 32.7 0.05 50 0C50.05 27.36 74.37 50.01 100 50C99.96 89.53 100.08 136.71 100 150C70.48 149.9 50.24 175.5 50 200C31.56 199.95 14.89 199.95 0 200L0 0Z
      M200 0C183.46 -0.08 166.79 -0.08 150 0C149.95 21.45 133.25 49.82 100 50C100.04 89.53 99.92 136.71 100 150C130.29 150.29 149.95 175.69 150 200C167.94 199.7 184.6 199.7 200 200L200 0Z
      M100 50C130.83 49.81 149.67 24.31 150 0C127.86 0.07 66.69 0.07 50 0C50.26 23.17 69.36 49.81 100 50Z
      M100 150C130.83 150.19 149.67 175.69 150 200C127.86 199.93 66.69 199.93 50 200C50.26 176.83 69.36 150.19 100 150Z
    ');
  }
  50% {
    clip-path: path('
      M0 0C16.03 0.05 32.7 0.05 50 0C50.05 27.36 74.37 50.01 100 50C99.96 89.53 100.08 136.71 100 150C70.48 149.9 50.24 175.5 50 200C31.56 199.95 14.89 199.95 0 200L0 0Z
      M200 0C183.46 -0.08 166.79 -0.08 150 0C149.95 21.45 133.25 49.82 100 50C100.04 89.53 99.92 136.71 100 150C130.29 150.29 149.95 175.69 150 200C167.94 199.7 184.6 199.7 200 200L200 0Z
      M100 -6.25C130.83 -6.44 149.67 -31.94 150 -56.25C127.86 -56.18 66.69 -56.18 50 -56.25C50.26 -33.08 69.36 -6.44 100 -6.25Z
      M100 206.25C130.83 206.44 149.67 231.94 150 256.25C127.86 256.18 66.69 256.18 50 256.25C50.26 233.08 69.36 206.44 100 206.25Z
    ');
  }
  100% {
    clip-path: path('
      M-106.25 0C-90.22 0.05 -73.55 0.05 -56.25 0C-56.2 27.36 -31.88 50.01 -6.25 50C-6.29 89.53 -6.17 136.71 -6.25 150C-35.77 149.9 -56.01 175.5 -56.25 200C-74.69 199.95 -91.36 199.95 -106.25 200L-106.25 0Z
      M306.25 0C289.71 -0.08 273.04 -0.08 256.25 0C256.2 21.45 239.5 49.82 206.25 50C206.29 89.53 206.17 136.71 206.25 150C236.54 150.29 256.2 175.69 256.25 200C274.19 199.7 290.85 199.7 306.25 200L306.25 0Z
      M100 -6.25C130.83 -6.44 149.67 -31.94 150 -56.25C127.86 -56.18 66.69 -56.18 50 -56.25C50.26 -33.08 69.36 -6.44 100 -6.25Z
      M100 206.25C130.83 206.44 149.67 231.94 150 256.25C127.86 256.18 66.69 256.18 50 256.25C50.26 233.08 69.36 206.44 100 206.25Z
    ');
  }
}

X-Plus

Dieser Übergang unterscheidet sich von den meisten Demos für diesen Artikel. Das liegt daran, dass andere Demos die Animation des "positiven" Raums von clip-path für Übergänge zeigen. Es stellt sich heraus, dass die Animation des "negativen" Raums mit den traditionellen clip-path-Formen schwierig sein kann. Mit der Polygonform ist dies zwar möglich, erfordert aber eine sorgfältige Platzierung der Eckpunkte, um den negativen Raum zu erzeugen und ihn nach Bedarf zu animieren. Diese Demo nutzt die Tatsache, dass es zwei Formen im Pfad gibt; eine Form ist ein riesiges Quadrat, das den Bereich des Elements umgibt, und eine weitere Form befindet sich in der Mitte dieses Quadrats. Die mittlere Form (in diesem Fall ein x oder +) schließt negativen Raum in der äußeren Form aus oder "schneidet" ihn aus. Dann werden die Eckpunkte der mittleren Form animiert, sodass nur der negative Raum animiert wird.

Die Leave-Animation beginnt mit der mittleren Form als winziges "x", das größer wird, bis das Element aus dem Blickfeld verschwindet. Bei der Enter-Animation ist die mittlere Form ein "+", das bereits größer als das Element ist und auf nichts schrumpft.

.x-plus-enter-active { animation: 1s x-plus-enter; }
.x-plus-leave-active { animation: 1s x-plus-leave; }

@keyframes x-plus-enter {
  0% {
    clip-path: path('M-400 600L-400 -400L600 -400L600 600L-400 600ZM0.01 -0.02L-200 -0.02L-200 199.98L0.01 199.98L0.01 400L200.01 400L200.01 199.98L400 199.98L400 -0.02L200.01 -0.02L200.01 -200L0.01 -200L0.01 -0.02Z');
  }
  100% {
    clip-path: path('M-400 600L-400 -400L600 -400L600 600L-400 600ZM98.33 98.33L95 98.33L95 101.67L98.33 101.67L98.33 105L101.67 105L101.67 101.67L105 101.67L105 98.33L101.67 98.33L101.67 95L98.33 95L98.33 98.33Z');
  }
}

@keyframes x-plus-leave {
  0% {
    clip-path: path('M-400 600L-400 -400L600 -400L600 600L-400 600ZM96.79 95L95 96.79L98.2 100L95 103.2L96.79 105L100 101.79L103.2 105L105 103.2L101.79 100L105 96.79L103.2 95L100 98.2L96.79 95Z');
  }
  100% {
    clip-path: path('M-400 600L-400 -400L600 -400L600 600L-400 600ZM-92.31 -200L-200 -92.31L-7.69 100L-200 292.31L-92.31 400L100 207.69L292.31 400L400 292.31L207.69 100L400 -92.31L292.31 -200L100 -7.69L-92.31 -200Z');
  }
}

Tropfen

Der Tropfen-Übergang nutzt die Fähigkeit, mehrere Formen im selben Pfad zu haben. Der Pfad enthält zehn Kreise, die strategisch innerhalb des Bereichs des Elements platziert sind. Sie beginnen winzig und unsichtbar und werden dann im Laufe der Zeit zu einer größeren Größe animiert. Es gibt zehn Keyframes in der Animation, und jeder Keyframe vergrößert einen Kreis, während der Zustand zuvor vergrößerter Kreise erhalten bleibt. Dies erweckt den Eindruck, dass Kreise während der Animation nacheinander ins oder aus dem Blickfeld springen.

Die Leave-Transition lässt die Kreise nacheinander schrumpfen, und der negative Raum wächst, um das Element auszuwischen. Die Enter-Transition spielt die Animation rückwärts ab, sodass die Kreise größer werden und der positive Raum wächst, um das neue Element freizulegen.

Der für den Tropfen-Übergang verwendete CSS ist ziemlich groß, schauen Sie sich also den CSS-Bereich der CodePen-Demo an, beginnend mit dem Selektor .drops-enter-active.

Zahlen

Dieser Übergang ähnelt dem X-Plus-Übergang oben – er verwendet eine negative Form für die Animation innerhalb einer größeren positiven Form. In dieser Demo ändert sich die animierte Form durch die Zahlen 1, 2 und 3, bis das Element weggewischt oder enthüllt wird. Die Zifferformen wurden durch Manipulation der Eckpunkte jeder Zahl zur Form der nächsten Zahl erstellt. Jede Zifferform hat also die gleiche Anzahl von Eckpunkten und Kurven, die korrekt von einer zur nächsten animiert werden.

Die Leave-Transition beginnt mit der Form in der Mitte, die jedoch unsichtbar gemacht wird. Sie animiert sich dann zur Form der ersten Zahl. Der nächste Keyframe animiert zur nächsten Zahl und so weiter, und spielt dann rückwärts ab.

Der dafür verwendete CSS ist riesig, genau wie der letzte, also schauen Sie sich den CSS-Bereich der CodePen-Demo an, beginnend mit dem Selektor .numbers-enter-active.

---

Hoffentlich hat Ihnen dieser Artikel eine gute Vorstellung davon vermittelt, wie clip-path verwendet werden kann, um flexible und leistungsstarke Animationen zu erstellen, die sowohl unkompliziert als auch komplex sein können. Animationen können einem Design eine nette Note verleihen und sogar Kontext bieten, wenn von einem Zustand in einen anderen gewechselt wird. Denken Sie gleichzeitig daran, diejenigen zu berücksichtigen, die möglicherweise die Menge an Animationen oder Bewegungen einschränken möchten, z. B. durch Festlegen von Präferenzen für reduzierte Bewegung.