Implement text ticker in Pagebuilder

I try to implement a text ticker in Pagebuilder.

This page:https://test.deijsmannetjes.nl/ijstaarten

The hero image is the first section of the page. I have used a Raw HTML addon to implement the ticker.

The HTML in the addon is:

        <div class="ticker-wrap">
            <div class="ticker">
                <span class="item">This is item 1</span>
                <span class="item">This is item 2</span>
            </div>
        </div>

The CSS in the add-on:

.ticker-wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    bottom: 0;
    height: 10vh;
    background-color: #DBDBE399;
    margin-bottom: -100px;
}
.item {
    display: inline-block;
    padding: 0 1rem;
    font-size: 2rem;
    color: #D3191F;
    font-weight: 800;
    font-family: sans-serif;
    margin-right: 200px;
}
.ticker {
    display: inline-block;
    margin-top: 4vh;
    animation: marquee 40s linear infinite;
}
@keyframes marquee {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-100%)
    }
}

@keyframes swap {
    0%,
    50% {
        left: 0%;
    }
    50.01%,
    100% {
        left: 100%;
    }
}

The CSS seems to work, with the exception of the animation! What am I doing wrong?