CSS gradient background animation is not animating

Question

So I saw this same code here used on backgrounds as an answer so I modified it for me. Whenever I try it or any animation it's not working. Even a simple animation. I am not a professional, but here is the code. Any thoughts?

Also a link to the "live site" in case something else is overwriting it. Open Live Link: https://enthusiastic-dust.localsite.io

If prompted, enter the information below. Username: trampoline Password: unbiased

.gb-layout-hero-1 {
    background: rgba(74,32,80,1);/* Old Browsers */
    background: -moz-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* FF3.6+ */
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(17,34,37,255)), color-stop(100%, rgba(34,99,104,1)));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%); /* IE 10+ */
    background: linear-gradient(45deg, rgba(74,32,80,1) 0%, rgba(17,34,37,255) 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a2050', endColorstr='#226368', GradientType=1 );
    animation: gradient 16s linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

Krokodil · Accepted Answer · 2021-10-11T21:23:13.707

Your code is actually working, just not the way you intended it to do so. The gradient is being animated, the only issue is that it is not moving since you have not set a background-size larger than 100%, therefore the positions you alternate between are the same in this case.

If you declare background-size like below, your gradient background will be animated.

.gb-layout-hero-1 {
    background: linear-gradient(45deg, rgba(9,9,121,1) 25%, rgba(0,212,255,1) 30%);
    background-size: 150%;
    animation: gradient 1300ms linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 130%}
}

<div class="gb-layout-hero-1" style="width: 1000%; height:200px;"></div>

CSS gradient background animation is not animating

1 Answers1