Streaming live at 10am (PST)

Text animation in loop

Hi! Does anyone know how to build this text animation? Labs - Rarestone Capital

You can use the Fancy-text plugin for loop animation.
or
@import:

html, body {
height: 100%;
}

body {
font-family: ‘Baloo Paaji’, cursive;
}

.container {
width: 100%;
height: 220px;
position: relative;
}

.container>div {
font-size: 75px;
text-transform: uppercase;
color: #ffe221;
opacity: 0;
height: 0px;
}
.container>div:nth-child(1){
animation: animation 12s infinite;
}
.container>div:nth-child(2){
animation: animation 12s infinite;
animation-delay: 4s;
}
.container>div:nth-child(3){
animation: animation 12s infinite;
animation-delay: 8s;
}
@keyframes animation {
0% {opacity: 0; height: auto;}
16% {opacity: 1;}
33% {opacity: 0; height: 0px;}
100% {opacity: 0; height: 0px;}
}

}


1
2
3

I simplified the example a bit. The disadvantage is that you need the know the number of divs you want to animate for this.

  1. We have 3 divs we will animate separately, so we want to “overlap” the 3 animations. While the other animation runs there will be a pause in the others. Therefore we calculate 1/3 animation time (33%) and 2/3 delay (33% - 100%) while the other animations run.

  2. Each element will get its own animation assigned by using the:nth-child() selector.

  3. We do not want the animations to run at the same time so we will add an animation-delay of 1/3 the animation time to the second element and 2/3 animation time to the third element.