Der Zustand der Wechselnden Farbverläufe mit CSS Transitions und Animationen

0
19

Zurück im Jahr 2012, Internet Explorer 10 raus kam und, unter anderem, schließlich unterstützten CSS-Verläufe und, darüber hinaus, die Fähigkeit zu animieren mit CSS! Kein anderer browser unterstützt diese bei der Zeit, aber ich war voller Hoffnung für die Zukunft.

Leider sind sechs Jahre vergangen und nichts hat sich geändert in dieser Abteilung. Edge unterstützt das animieren Farbverläufe mit CSS, genau wie IE 10 haben, aber keine anderen browser unterstützt. Und während der Animation background-size oder background-position oder die Deckkraft oder die rotation eines pseudo-element überlagern können uns einen langen Weg in Bezug auf die Erreichung Coole Effekte, diese Problemumgehungen sind noch begrenzt.

Es gibt Auswirkungen, die wir nicht reproduzieren können, ohne das hinzufügen viele zusätzliche Elemente, oder viele extra-Gradienten, wie z.B. “Jalousie-Effekt” unten zu sehen.

Der Jalousie-Effekt (live-demo, Edge/ IE 10+).

In Edge ist, immer die obige Effekt wird erreicht bei einer keyframe-animation:

html – {
background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;
animation: Jalousien 1s ease-in-out infinite alternate;
}

@keyframes Jalousien {
{
background-image: linear-gradient(90deg, #f90 100%, #444 0);
}
}

Wenn das scheint NASS, wir können TROCKEN mit einem Hauch von Sass:

@Funktion blinds($open: 0) {
@return-linear-gradient(90deg, #f90 $öffnen*100%, #444 0);
}

html – {
hintergrund: Jalousien() 50%/ 5em;
animation: Jalousien 1s ease-in-out infinite alternate;
}

@keyframes Jalousien { zu { background-image: Jalousien(1) } }

Während wir uns vorgenommen haben, den code, den wir schreiben und was wir noch Bearbeiten müssen später viel mehr zu warten, wir haben noch die Wiederholung in der kompilierten CSS-und wir sind begrenzt durch die Tatsache, dass wir kann Sie nur animieren, zwischen den Haltestellen mit dem gleichen Gerät — während der Animation von 0% zu 100% funktioniert, versucht 0 oder 0px anstelle von 0% ergibt sich keine animation mehr Los. Nicht zu erwähnen, dass Chrome und Firefox nur flip von orange zu Grau mit keine Stopp-position animation!

Glücklicherweise, in diesen Tagen haben wir eine noch bessere option: CSS-Variablen!

Direkt aus der box, CSS Variablen sind nicht animierbar, aber wir können übergang (aber keine animation!) Auswirkungen, wenn die Eigenschaft, die wir Sie für den Einsatz animiert werden. Zum Beispiel, wenn innerhalb eines transform-Funktion, können wir den übergang, die Transformation der Eigenschaft.

Wir betrachten als Beispiel eine box, die wird verschoben und gequetscht, wenn eine checkbox aktiviert ist. Auf dieser box setzen wir eine Transformation, die hängt von einem Faktor-f an das zunächst 1:

.box {
/* grundlegende Formatierungen-wie z.B. Abmessungen und hintergrund */
– f: 1;
transform: translate(calc((1 – var (- f))*100vw)) scalex(var (- f));
}

Wenn das Markierungsfeld “aktiviert” ändern wir den Wert der CSS-variable –f .5:

:checked ~ .box { –f: .5 }

Einstellung mit einem Klick auf .box macht es reibungslos von einem Zustand in den anderen:

.box {
/* gleichen Stile wie zuvor */
transition: transform .3s ease-in;
}

Beachten Sie, dass dies nicht wirklich funktioniert in der aktuellen version von Edge durch diesen bug.

Finden Sie den Stift, indem Sie thebabydino (@thebabydino) auf CodePen.

Jedoch, CSS-Verläufe sind hintergrund-Bilder, die sind nur animiert in Rand-und IE 10+. Während wir also machen können Dinge einfacher für uns und reduzieren Sie die Menge der generierten CSS-Datei für übergänge (wie im code unten), von der wir noch nicht die Fortschritte im Hinblick auf die Erweiterung zu unterstützen.

.Jalousien {
background: linear-gradient(90deg, #f90 var(–pos, 0%), #444 0) 50%/ 5em;
transition: .3s ease-in-out;

:checked ~ & { –pos: 100%; }
}

Öffnen/schließen Jalousien zum aktivieren/deaktivieren der checkbox (live-demo, nur Edge).

Geben Sie Houdini, die es uns ermöglicht, register benutzerdefinierte Eigenschaften und dann animieren. Derzeit ist dies nur unterstützt von Blink-Browser hinter dem Experimental-Web-Platform-features fahne, aber es ist immer noch die Erweiterung unterstützen, ein bisschen vom Rand allein.

Die Experimental-Web-Platform-features flag in Chrom.

Gehen wir zurück zu unserem Beispiel registrieren wir die –pos benutzerdefinierte Eigenschaft:

CSS.registerProperty({
name: ‘–pos’,
syntax: ‘<length-Anteil>’,
initialValue: ‘0%’
});

Beachten Sie, dass <Länge-Anteil> heißt, es akzeptiert nicht nur die Länge und die prozentualen Werte, sondern auch calc () – Kombinationen von Ihnen. Durch Kontrast, <Länge> | <Prozentsatz> nur akzeptiert, Länge und prozentuale Werte, aber nicht die calc () – Kombinationen von Ihnen.

Allerdings tun dies nicht keinen Unterschied machen, in Chrom, auch mit dem flag aktiviert, wahrscheinlich, weil, im Falle der übergänge, was umgestellt wurde, ist die Eigenschaft, deren Wert abhängig ist von der CSS-variable und nicht die CSS-variable selbst. Und da wir im Allgemeinen nicht dem übergang zwischen zwei hintergrund-Bilder in Chrome im Allgemeinen, auch dieser nicht.

Es funktioniert in Edge, aber es funktionierte in Edge auch ohne Anmeldung –pos-variable, weil Edge ermöglicht uns den übergang zwischen den Gradienten in Allgemeinen.

Was funktioniert in Blink-Browser mit dem flag aktiviert ist, dass eine animation statt, ein übergang.

html – {
background: linear-gradient(90deg, #f90 var(–pos, 0%), #444 0) 50%/ 5em;
animation: Jalousien .85s ease-in-out infinite alternate;
}

@keyframes Jalousien {{ –pos: 100%; } }

Dies ist jedoch jetzt nicht in der Kante nicht mehr da, während Edge animieren können zwischen den Farbverlauf-hintergrund, Sie können nicht tun das gleiche für benutzerdefinierte Eigenschaften.

Daher müssen wir einen alternativen Ansatz für die Kante hier. Dies ist, wo @unterstützt die in handliches kommt, da alles, was wir tun müssen ist, überprüfen Sie, ob ein -ms – Präfix-Eigenschaft unterstützt wird.

@Funktion grad($pos: 100%) {
@return-linear-gradient(90deg, #f90 $pos, #444 0);
}

html – {
/* das gleiche wie vorher */

@unterstützt (-ms-user-select: none) {
background-image: grad(0%);
animation-name: Jalousien-alt -;
}
}

@keyframes Jalousien-alt { zu { background-image: grad() } }

Stop-Positionen sind nicht die einzige Sache, die wir animieren können diese Weise. Wir können das gleiche tun für die Steigungs-Winkel. Die Idee dahinter ist so ziemlich das gleiche, außer dass jetzt unsere animation nicht abwechselnd mehr und wir verwenden eine easeInOutBack Art von timing-Funktion.

@Funktion grad($ang: 1turn) {
@return-linear-gradient($ang, #f90 50%, #444 0);
}

html – {
hintergrund: grad(var(–ang, 0deg));
animation: rot 2s-cubic-bezier(.68, -.57, .26, 1.65) unendlich;

@unterstützt (-ms-user-select: none) {
background-image: grad(0turn);
animation-name: rot-alt -;
}
}

@keyframes rot {{ –ang: 1turn; } }

@keyframes rot-alt { zu { background-image: grad(); } }

Denken Sie daran, dass, wie im Falle von stop-Positionen, können wir Sie nur animieren, zwischen Steigungs-Winkel, ausgedrückt in der gleichen Einheit in der Kante, so ruft unsere Sass-Funktion mit grad(0deg) anstelle von grad(0turn) nicht funktioniert.

Und, natürlich, die CSS-variable, die wir verwenden nun nimmt der Winkel Werte anstelle von Längen-und Prozentangaben:

CSS.registerProperty({
name: ‘–ang’,
syntax: ‘<Winkel>’,
initialValue: ‘0deg’
});

Kehren um (live-demo, Blink-Browser mit fahne und Rand).

In ähnlicher Weise können wir auch animieren, radiale Farbverläufe. Und die wirklich Coole Sache mit den CSS-Variablen-Ansatzes ist, dass er es uns ermöglicht, zu animieren, die verschiedenen Komponenten des Gradienten unterschiedlich, das ist etwas, das nicht möglich bei der Animation Gradienten als ganzes, die Art und Weise Rand hat (weshalb die folgenden demos nicht so gut im Rand).

Sagen wir, wir haben folgende radial-gradient():

$p: 9%;

html – {
–x: #{$p};
–y: #{$p};
background: radial-gradient(circle at var (- x) var(–y), #f90, #444 $p);
}

Wir registrieren –x –und y-Variablen:

CSS.registerProperty({
name: ‘–x’,
syntax: ‘<length-Anteil>’,
initialValue: ‘0%’
});

CSS.registerProperty({
name: ‘–y’,
syntax: ‘<length-Anteil>’,
initialValue: ‘0%’
});

Dann fügen wir die Animationen:

html – {
/* das gleiche wie vorher */
animation: eine 0s ease-in-out -2.3 s wechseln unendliche;
animation-name: x, y;
animation-duration: 4.1 s an, 2.9 s;
}

@keyframes x {{ –x: #{100% – $p -} } }
@keyframes y {{ –y: #{100% – $p -} } }

Das Ergebnis, das wir bekommen können unten gesehen werden:

Moving light (live-demo, Blink-Browser mit dem flag).

Wir können dieses Verfahren verwenden, zu animieren, die verschiedenen benutzerdefinierten Eigenschaften verwenden wir in der gradient-Funktion, um die Jalousien in unserem ersten Beispiel schließen Sie den anderen Weg gehen, anstatt zurück. Um dies zu tun, führen wir zwei weitere CSS-Variablen, –c0 –c1:

$c: #f90 #444;

html – {
–c0: #{N-TEN($c, 1)};
–c1: #{N-TEN($c, 2)};
background: linear-gradient(90deg, var(–c0) var(–pos, 0%), var(–c1), 0) 50%/ 5em;
}

Wir registrieren alle diese benutzerdefinierten Eigenschaften:

CSS.registerProperty({
name: ‘–pos’,
syntax: ‘<length-Anteil>’,
initialValue: ‘0%’
});

CSS.registerProperty({
name: ‘–c0’,
syntax: ‘<color>’,
initialValue: ‘rot’
});

/ * – c1 */

Wir verwenden die gleiche animation wie zuvor für die position des ersten Stopp-pos und darüber hinaus stellen wir zwei Schritte () – Animationen für die anderen beiden Variablen, schalten Sie Ihre Werte jedes mal, wenn eine iteration der ersten animation (die eine änderung des Wertes –pos) ist abgeschlossen:

$t: 1s;

html – {
/* das gleiche wie vorher */
animation: eine 0s infinite;
animation-name: c0 -, pos -, c1;
animation-duration: 2*$t, $t;
animation-timing-function: die Schritte(1), ease-in-out;
}

@keyframes pos { zu { –pos: 100%; } }

@keyframes c0 { 50% { –c0: #{N-TEN($c, 2)} } }
@keyframes c1 { 50% { –c1: #{N-TEN($c, 1)} } }

Und wir bekommen das folgende Ergebnis:

Eine andere version der Jalousien animation (live-demo, Blink-Browser mit dem flag).

Wir können auch anwenden, um das ein radial-gradient() (nichts, aber der hintergrund Erklärung von änderungen):

background: radial-gradient(circle, var(–c0) var(–pos, 0%), var(–c1), 0);

Wachsende discs (live-demo, Blink-Browser mit dem flag).

Die exakt gleiche Taktik funktioniert für Kegelschnitt-gradient ():

hintergrund: Kegelschnitt-gradient(var(–c0) var(–pos, 0%), var(–c1), 0);

Wachsende Scheiben (live-demo, Blink-Browser mit dem flag).

Sich wiederholende Farbverläufe sind auch eine option, die Schaffung eines ripple-Effekt in der radialen Fall:

$p: 2em;

html – {
/* das gleiche wie vorher */
background: repeating-radial-gradient(circle,
var(–c0) 0 var(–pos, 0px), var(–c1) 0 $p);
}

@keyframes pos { 90%, 100% { –pos: #{$p} } }

Ripples (live-demo, Blink-Browser mit dem flag).

Und ein helix/Strahlen-Effekt in dem konischen Gehäuse:

$p: 5%;

html – {
/* das gleiche wie vorher */
hintergrund: die Wiederholung-conic-gradient(
var(–c0) 0 var(–pos, 0%), var(–c1) 0 $p);
}

@keyframes pos { 90%, 100% { –pos: #{$p} } }

Wachsende Strahlen (live-demo, Blink-Browser mit dem flag).

Wir können auch hinzufügen, eine andere CSS-variable um Dinge interessanter zu machen:

$n: 20;

html – {
/* das gleiche wie vorher */
background: radial-gradient(circle at var(–o, 50% zu 50%),
var(–c0) var(–pos, 0%), var(–c1), 0);
animation: eine 0s infinite;
animation-name: c0, o -, pos -, c1;
animation-duration: 2*$t, $n*$t, $t;
animation-timing-function: die Schritte(1), die Schritte(1), ease-in-out;
}

@keyframes o {
@for $i von 0 bis $n {
#{$i*100%/$n -} {–o: #{random(100)*1%} #{random(100)*1%} }
}
}

Wir registrieren diese variable für die ganze Sache zu arbeiten:

CSS.registerProperty({
name: ‘–o’,
syntax: ‘<length-Anteil>+’,
initialValue: ‘50%’
});

Und das ist es! Das Ergebnis kann unten gesehen werden:

Nach dem Zufallsprinzip wachsenden discs (live-demo, Blink-Browser mit dem flag).

Ich würde sagen, die Zukunft von wechselnden Farbverläufe mit keyframe-Animationen sieht ziemlich cool aus. Aber in der Zwischenzeit für cross-browser-Lösungen, die den JavaScript-Weg bleibt die einzig gültigen.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!