Анимация градиента

165

15 февраля 2019, 18:40

Первый раз с таким столкнулась. Мне нужна анимация градиента, что бы была еле заметной. Получилось найти такой вариант(https://wp-lessons.com/tsvetovaya-animatsiya-teksta-css), но анимация дикая какая-то. Вот код. Помогите сделать анимацию незаметной.

body{ 
height: 683px; 
	max-height: 100%;  
	background:  
	linear-gradient(to top left, #c04481, transparent 54%), 
	linear-gradient(to right, rgba(163,65,147,1) 0%, rgba(192,65,126,1) 19%, rgba(220,83,94,1) 51%, rgba(222,89,89,1) 62%, rgba(228,119,72,1) 83%, rgba(234,160,49,1) 100%); 
  -webkit-background-clip: text; 
 -webkit-animation: animate-logo; 
 -webkit-animation-delay: 0; 
 -webkit-animation-duration: 7s; 
 -webkit-animation-timing-function: linear; 
 -webkit-animation-iteration-count: infinite; 
 -webkit-animation-fill-mode: forwards; 
 transition: font-size 500ms ease-in-out; 
} 
@-webkit-keyframes animate-logo { 
 20% { 
 background-position: 0 1200px; 
 } 
 100% { 
 background-position: 1200px 0; 
 } 
}

Answer 1

Анимировать полноэкранные градиенты крайне не рекомендуется, но надо, так надо...

html { 
  height: 100%; 
} 
 
body { 
  height: 100%; 
  max-height: 100%; 
  background: linear-gradient(to top, transparent, #c04481, transparent), linear-gradient(to right, rgba(163, 65, 147), rgba(163, 65, 147), rgb(204, 75, 85), rgb(208, 103, 57), rgba(234, 160, 49), rgba(234, 160, 49), rgb(208, 103, 57), rgb(204, 75, 85), rgba(163, 65, 147)); 
  background-size: 200% 200%; 
  animation: 40s infinite linear animate-v, 30s infinite ease animate-h; 
} 
 
@-webkit-keyframes animate-h { 
  from { background-position-x: 0%; } 
  to { background-position-x: 200%; } 
} 
 
@-webkit-keyframes animate-v { 
  from { background-position-y: -200%; } 
  to { background-position-y: 200%; } 
}