Keyframes-Animation: Gradient / Verlauf animieren

CSS Gradient, Verlauf animieren

linear-gradient und radial-gradient sind Eigenschaften von background-image und lassen sich nicht direkt animieren. Wir können background-size, background-position und opacity animieren, nicht aber linear gradient – den Verlauf selber.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Verlauf animieren – geht doch

background: linear-gradient( orange, blue );

Anstelle von linear-gradient wird background-position – die Position des Hintergrundbildes – animiert.

background-size ändern

200
200

background-size in Übergröße

background-size muss größer sein als 100%. Bei 100% bewegt sich gar nichts, bei kleineren Werten entsteht eine Wiederholung des Hintergrundbildes. Nicht der Verlauf wird also animiert, sondern ein übergroßer Hintergrund wird verschoben, so dass die Farben scheinbar laufen.

.myline {
    width: 100%;
    height: 40vh;
    background-size: 200% 200%;
    background-image: repeating-linear-gradient(
		-45deg,
		hsl(215,30%,60%) 0%,  /* blau */
		hsl(120,30%,90%) 15%, /* grün */
		hsl(30,50%,90%) 30%,  /* rosa */
		hsl(215,30%,60%) 45%  /* blau */
	);
    animation: diagonal alternate 30s infinite;
}

@keyframes diagonal {
    0% {background-position: 0% 50%}
    100% {background-position: 100% 50%}
}

Alternativ: Übergroßen Hintergrund animieren

Statt background-size des Gradient zu animieren kann ein selbstständiger Verlaufs-Hintergrund mit CSS transition animiert werden.

landschaft ohne Hintergrund
.container {
   position:relative;
   overflow:hidden;
}

.animated-sky {
   height: 1360px;
   width: 100%;
   position: absolute; top:0; left:0;
   background-image: 
      linear-gradient(to bottom, hsl(200,60%,25%) 0%, 
                                 hsl(200,60%,55%) 20%, 
                                 hsl(200,60%,90%) 30%,
                                 hsl(200,60%,90%) 50%,
                                 hsl(200,60%,25%) 70%,
                                 hsl(200,60%,55%) 100%); 
	animation: Daytime infinite ease-out 15s;
}

.container svg {
 position: absolute; top:0; left:0;
}

@keyframes Daytime {
 from { top: 0}
 to   { top: -1000px}
}