@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.text-animation {
animation-duration: 2.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.text-animation:first-child {
animation-name: slideIn;
}
.text-animation:last-child {
animation-name: fadeOut;
}
.text-animation span {
display: inline-block;
}
.text-animation span:nth-child(1) {
animation-delay: 0s;
}
.text-animation span:nth-child(2) {
animation-delay: 2.5s;
}
.text-animation span:nth-child(3) {
animation-delay: 4s;
}
