I have found a CSS animation for a word swiping over from this code pen: code

It works great! However, when I try to increase the font size to 70 the words start overlapping. I have played around with it but can't get it to work nicely. How do I get this piece of code to work with a larger font size? This is what I have now:

.wordCarousel {
    font-size: 36px;
    font-weight: 100;
    color: #eee;
    div {
        overflow: hidden;
        position: relative;
        float: right;
        height: 65px;
        padding-top: 10px;
        margin-top: -10px;
        li {
            font-family: Serif;
            color: #eee;
            font-weight: 700;
            padding: 0 10px;
            height: 45px;
            margin-bottom: 45px;
            display: block;
        }
    }
}

@keyframes flip4 {
    0% {
        margin-top: -360px;
    }
    5% {
        margin-top: -270px;
    }
    25% {
        margin-top: -270px;
    }
    30% {
        margin-top: -180px;
    }
    50% {
        margin-top: -180px;
    }
    55% {
        margin-top: -90px;
    }
    75% {
        margin-top: -90px;
    }
    80% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
}

The html is similar to this:

<h4 >
    <span>Word swipe animation: </span>
    <div>
        <!-- Use classes 2,3, or 4 to match the number of words -->
        <ul >
            <li>Oh My!</li>
            <li>Swoosh</li>
            <li>Cool</li>
            <li>Squirrel