Alternating text animation in CSS and Javascript – A HTML, Javascript and CSS code snippet

A HTML, JavaScript and CSS code snippet post which shows you an alternating text animation in CSS and JavaScript. The code utilises the animation-duration, animation-iteration-count, keyframes and animation-timing-function. Sourced under a permissive license.

Alternating text animation in CSS and JavaScript 

<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>
<style>
.alternating {
  animation-name: alternating-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes alternating-text {
  90% {
    display: none;
  }
}
</style>
<script>
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);
</script>

Tags: CSS, HTML, CSS, CSS code snippet, html code snippet, getelementbyid, javascript, text animation, animation-duration, animation-iteration-count, animation-timing-function, keyframes

Image: Unsplash license

CC BY 4.0 added intro and tags – 30 Seconds of Code