Custom Gradient CSS Background in a section

Site URL: https://flower-springtail-8n3z.squarespace.com/

I'm trying to achieve this effect for a section on my site: https://codepen.io/P1N2O/pen/pyBNzX

I am able to identify the section then applied the gradient, I just can't figure to animate it. Can anyone tell me how to solve this?

[data-section-id="608a398bf571e2467b77682d"] .section-background {
  	background: linear-gradient(45deg, #2242c1, #2beadb) !important;
	background-size: 200% 200% !important;
  	-webkit-animation: AnimationName 5s ease infinite !important;
    -moz-animation: AnimationName 5s ease infinite !important;
    animation: AnimationName 5s ease infinite !important;
}

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

This snippet works

[data-section-id="608a398bf571e2467b77682d"] .section-background {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

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

@bangank36 It works! Thank you very much!