Como vc não deu muitos detalhes de como queria a animação eu fiz duas opções.
Uma com a frase fazendo um Fade-In
e outra com a frase entrando na tela por cima da outra. Os exemplos são simples, mas acho que vai te dar um norte...
Exemplo fazendo o Fade-In
.fade {
font-family: sans-serif;
font-size: 2rem;
color: red;
position: relative;
}
.fade::after {
content: attr(data-text);
position: absolute;
color: blue;
top: 0;
left: 0;
opacity: 0;
background-color: #fff;
animation: fader 5s infinite linear;
}
@keyframes fader {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="fade" data-text="Minha fraze surgindo...">Minha fraze sumindo!</div>
Exemplo fazendo uma frase entrando por cima da outra
.texto {
font-family: sans-serif;
font-size: 2rem;
color: red;
position: relative;
overflow: hidden;
width: 320px;
}
.texto::after {
content: attr(data-text);
position: absolute;
color: blue;
top: 0;
left: -300px;
width: 0;
background-color: #fff;
animation: anima 5s infinite linear;
}
@keyframes anima {
0% {
left: -300px;
}
40% {
left: -300px;
}
50% {
left: 0px;
width: 100%;
}
90% {
left: 0px;
width: 100%;
}
100% {
left: -300px;
}
}
<div class="texto" data-text="Minha segunda...">Minha primeira Frase!</div>
animation
) para cadadiv
e talvez nem funcione corretamente.