Gradient Animation CSS3

Hello! I am using the SiteOrigin Visual Editor and trying to make one row have an animated gradient background using only CSS.

I am inputting the CSS in the “CSS Styles” panel of the visual editor’s row ‘attributes,’ and it displays the first still frame of the animation but is not animated. Is there a way to make this work?

The code for the animation is below, and the webpage is https://www.cindyduong.com/portfolio-dupe/

body {
    width: 1280;
    height: 500px;
    background-color: #44c1c0;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {background-color: #f4e501;}
    to {background-color: #44c1c0;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: #f4e501;}
    to {background-color: #44c1c0;}
}