Keyframes-Animation: Gradient 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.

background: linear-gradient( orange, blue );

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

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.

background-size ändern

200
200
.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.

.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}
}