2

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!

Franky
  • 1,262
  • 2
  • 16
  • 31
  • You need to know the number of items so you can adjust the animation. If you don't know the number you can't adjust it properly. – Paulie_D Jul 29 '21 at 19:15
  • If you want to set the animation up with code rather than with CSS directly you will probably want to use Javascript. However, for just the 3 items that you have you can increase the total time of the animation (18s to 30s say) and the delays from 6s and 12s to 10s and 20s. You could also use CSS variables and calc for those. Unfortunately though CSS does not allow variables to be used as % values in keyframes, hence need for JS (or by hand calculation in advance of run time). – A Haworth Jul 29 '21 at 19:21
  • Thanks for the replies. I was hoping there is a way to do this without knowing how many items. I will use JS then. – Franky Jul 29 '21 at 19:39

0 Answers0