First
word
stays
static
and
the
remaining
words
appear
one
by
one
.rotate-text {
position: relative;
display: inline-block;
}
.static-word {
display: inline-block;
}
.rotating-words span {
opacity: 0;
animation: rotate 11s linear infinite;
}
@keyframes rotate {
0% {
opacity: 0;
}
9.09% {
opacity: 1;
}
18.18% {
opacity: 1;
}
27.27% {
opacity: 1;
}
36.36% {
opacity: 1;
}
45.45% {
opacity: 1;
}
54.55% {
opacity: 1;
}
63.64% {
opacity: 1;
}
72.73% {
opacity: 1;
}
81.82% {
opacity: 1;
}
90.91% {
opacity: 1;
}
100% {
opacity: 1;
}
}
document.addEventListener("DOMContentLoaded", function(event) {
const rotatingWords = document.querySelectorAll('.rotating-words span');
let delay = 1;
rotatingWords.forEach(function(word, index) {
word.style.animationDelay = (index * 1.1 + delay) + 's';
});
});
