Alternating text
CSS, Animation · May 25, 2023

Creates an alternating text animation.
- Create a
<span>
for the text that will be alternated. - Define an animation,
alternating-text
, that makes the<span>
disappear by settingdisplay: none
. - In JavaScript, define an array of the different words that will be alternated and use the first word to initialize the content of the
<span>
. - Use
EventTarget.addEventListener()
to define an event listener for the'animationiteration'
event. This will run the event handler whenever an iteration of the animation is completed. - Use
Element.innerHTML
to display the next element in the array as the content of the<span>
.
<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>
.alternating {
animation-name: alternating-text;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes alternating-text {
90% {
display: none;
}
}
const texts = ['Java', 'Python', 'C', 'C++', 'C#', 'Javascript'];
const element = document.getElementById('alternating-text');
let i = 0;
const listener = e => {
i = i < texts.length - 1 ? i + 1 : 0;
element.innerHTML = texts[i];
};
element.innerHTML = texts[0];
element.addEventListener('animationiteration', listener, false);