CSS Animation Transform

I am creating an animation that rotate text that's based on this website: https://tympanus.net/Tutorials/CSS3RotatingWords/

I would like to make the text stay longer and support unknow number of sentences:

<div style="height:25px;margin-bottom:5px;">
    <div class="rw-words rw-words-1">
        <span style="-webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; ">This is sentence one</span>
        <span style="-webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; ">This is sentence two</span>
        <span style="-webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; ">This is sentence three</span>
    </div>
</div>

<style>
.rw-words-1 span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
}

@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    20% {
        opacity: 1;
        -webkit-transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -ms-transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    20% {
        opacity: 1;
        -ms-transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }


    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

</style>

Above codes work well but I would like the text to stay longer before rotating to the next. I've tried to change the keyframes % values but that only messes up the animation. What do I need to do to say keep each sentence up for 10 seconds before next? Thanks!

CSS Animation Transform

0 Answers