Keyframes-Animation: Gradient / Verlauf animieren

Verlauf animieren – geht doch

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.

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