Simple CSS Animation - Not Working on front-end (works on back-end)

Site URL: https://kinshipcreative.agency/about?password=zest

I am implementing a pretty simple custom animation based off a codepen + online tutorial. It seems to work on the back-end of my site, but as soon as I visit it from the front end, or on mobile, it no longer works.

I don't have much experience with keyframes/CSS animations, so I'm wondering if anyone can help? See code below: 

Site Here 
(pw=zest)

<div class="rotating-words">
<h2><strong>
<span>The World</span>  
<span>Our Community</span>
<span>Our Clients</span>
<span>The World</span>  
</strong></h2>
</div>

<style>
  .rotating-words {
    overflow: hidden;
     -webkit-box-sizing: content-box;
             box-sizing: content-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 3px;
}
.rotating-words span {
    display: block;
    height: 100%;
    padding-left: 10px;
    -webkit-animation: spin_words 8s infinite;
            animation: spin_words 8s infinite;
}
@-webkit-keyframes spin_words{
    10%{
        -webkit-transform: translateY(-112%);
                transform: translateY(-112%);
    }
    25%{
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
    }
    35%{
        -webkit-transform: translateY(-212%);
                transform: translateY(-212%);
    }
    50%{
        -webkit-transform: translateY(-200%);
                transform: translateY(-200%);
    }
    60%{
        -webkit-transform: translateY(-312%);
                transform: translateY(-312%);
    }
    65% {
        -webkit-transform: translateY(-300%);
                transform: translateY(-300%);
    }
  100%{
        -webkit-transform: translateY(-292%);
                transform: translateY(-292%);
    }
   
}
@keyframes spin_words{
    10%{
        -webkit-transform: translateY(-112%);
                transform: translateY(-112%);
    }
    25%{
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
    }
    35%{
        -webkit-transform: translateY(-212%);
                transform: translateY(-212%);
    }
    50%{
        -webkit-transform: translateY(-200%);
                transform: translateY(-200%);
    }
    60%{
        -webkit-transform: translateY(-312%);
                transform: translateY(-312%);
    }
    65% {
        -webkit-transform: translateY(-300%);
                transform: translateY(-300%);
    }
  100%{
        -webkit-transform: translateY(-292%);
                transform: translateY(-292%);
    }
   
}
</style>

On 9/3/2022 at 10:13 PM, tuanphan said:

Remove this line from your code

Thank you!!