Бесконечная анимация CSS градиентов

CSS-градиенты позволяют создавать плавные цветовые переходы, которые можно анимировать для получения эффекта бесконечно меняющегося фона. Рассмотрим различные подходы.

1. Базовая анимация линейного градиента

Простейший пример анимированного линейного градиента:

<div class="gradient-animation-example"></div>

.gradient-animation-example {
	width: 100%;
	height: 300px;
	background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00);
	background-size: 200% 200%;
	animation: gradientMove 5s ease infinite;
}

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

2. Анимация радиального градиента

Создадим эффект "пульсирующего" радиального градиента:

<div class="radial-animation-example"></div>

.radial-animation-example {
	width: 100%;
	height: 300px;
	background: radial-gradient(circle, #3a7bd5, #00d2ff);
	background-size: 400% 400%;
	animation: radialPulse 8s ease infinite;
}

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

3. Многоцветный градиент

Анимация градиента с несколькими цветовыми остановками:

<div class="multicolor-gradient-example"></div>

.multicolor-gradient-example {
	width: 100%;
	height: 300px;
	background: linear-gradient(
		45deg,
		#ff9a9e 0%,
		#fad0c4 10%,
		#fbc2eb 20%,
		#a6c1ee 30%,
		#a18cd1 40%,
		#fbc2eb 50%,
		#fad0c4 60%,
		#ff9a9e 70%,
		#fad0c4 80%,
		#fbc2eb 90%,
		#a6c1ee 100%
	);
	background-size: 200% 200%;
	animation: multicolor 12s linear infinite;
}

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

4. Эффект "волны"

Имитация волнообразного движения с помощью градиента:

<div class="wave-effect-example"></div>

.wave-effect-example {
	width: 100%;
	height: 300px;
	background: 
		linear-gradient(90deg, 
			rgba(0,119,182,0.8) 0%, 
			rgba(0,180,216,0.8) 50%, 
			rgba(144,224,239,0.8) 100%);
	background-size: 200% 100%;
	animation: wave 6s ease-in-out infinite alternate;
}

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

5. Комбинированный эффект

Сочетание нескольких градиентов с разной анимацией:

<div class="combined-gradient-example"></div>

.combined-gradient-example {
	width: 100%;
	height: 400px;
	background: 
		linear-gradient(217deg, 
			rgba(255,0,0,0.3), 
			rgba(255,0,0,0) 70%),
		linear-gradient(127deg, 
			rgba(0,255,0,0.3), 
			rgba(0,255,0,0) 70%),
		linear-gradient(336deg, 
			rgba(0,0,255,0.3), 
			rgba(0,0,255,0) 70%);
	background-size: 300% 300%;
	animation: combined 12s ease infinite;
}

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

6. Диагональные волны

Пример с красивой сменой цвета:

<div class="animated-gradient-color"></div>

.animated-gradient-color {
	width: 100%;
	height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

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