Как анимировать градиент?

Question

У меня есть css код:

::-webkit-scrollbar-thumb {
    background: -webkit-linear-gradient(270deg, hsl(0deg, 100%, 50%), hsl(20deg, 100%, 50%), hsl(40deg, 100%, 50%), hsl(60deg, 100%, 50%), hsl(80deg, 100%, 50%), hsl(100deg, 100%, 50%), hsl(120deg, 100%, 50%), hsl(140deg, 100%, 50%), hsl(160deg, 100%, 50%), hsl(180deg, 100%, 50%), hsl(200deg, 100%, 50%), hsl(220deg, 100%, 50%), hsl(240deg, 100%, 50%), hsl(260deg, 100%, 50%), hsl(280deg, 100%, 50%), hsl(300deg, 100%, 50%), hsl(320deg, 100%, 50%), hsl(340deg, 100%, 50%), hsl(360deg, 100%, 50%));
    border-radius: 5px;
    border: 2px solid #373737;
}

это код который делает thumb радужным как в палитре цветов.

И мне нужно как-то анимировать чтобы градиент двигался с верху вниз.

Простите если я невнятно объяснил...

Answer 1

body {
    background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    transform: translate3d(0, 0, 0);
}
 
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.css-selector {
    width: 100%;
    height: 500px;
    background: linear-gradient(180deg, #00ffbd, #ff0000);
    background-size: 400% 400%;

    -webkit-animation: AnnimationName 30s ease infinite;
    -moz-animation: AnnimationName 30s ease infinite;
    -o-animation: AnnimationName 30s ease infinite;
    animation: AnnimationName 30s ease infinite;
}
@-o-keyframes AnnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

@-webkit-keyframes AnnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes AnnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes AnnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

<div class='css-selector'>

</div>

Css Gradient Animator

БЛОГ НА HUSL

Как анимировать градиент?

Ответы (1 шт):