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 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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