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



HTML:

<div class="animated-bg"></div>




CSS:

.animated-bg {

background: linear-gradient(

to right, #833ab4, #fd1d1d, #fcb045);

background-size: 400% 400%;

animation: animated-bg 10s infinite ease-in-out;

}



@keyframes animated-bg {

0% {

background-position: 0 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0 50%;

}

}




👉 @FrontendPortal | #CSS