Another go at flickering text

02 Jan, 2026

My previous solution was messier, more verbose, and didn't have easily-changeable configurations at the top. It also would flicker an entire sentence instead of just flickering a few words within a sentence. Further, this version actually has two different custom "marquee"s, one for text that should switch instantly (no fade effect) and custom styles for the "style marquee" to apply color and text decoration (underline).

How It Works: Every item uses the exact same animation to fade-in and (optionally) scroll-in. And then each item just starts its animation later depending on its position. There's a little bit of math. When scroll is disabled, the scroll-height is multiplied by 0, thus causing there to be no scroll. And like before, the <span>s underneath the "marquee" are all absolutely positioned so they can sit on top of eachother. The <div> is there to take up space, but it's text is transparent so you can't see it.

Example

When Human Rights Black Lives Free Speech Immigrants Education

Human Rights

are are is are is

are

under attack what do We do?

Code

Rules for making changes:

the <div> child of <span class="marquee ..."> must be the longest text among your options. If it is shorter, your longer texts may clip/overlap.
There are modifiable variables at the top of the css to disable scrolling, change the color, etc.
If you ADD MORE ITEMS, you MUST update the percentages underneath BOTH @keyframes AND update the num_items variable. If you have 5 items, your break point is 20%. 4 Items is 25%. 7 items is 1/7 = 14.2%.

<div>  
    When  
    <span class="marquee style">  
        <span>Human Rights</span>  
        <span>Black Lives</span>  
        <span>Free Speech</span>  
        <span>Immigrants</span>  
        <span>Education</span>  
        <div>Human Rights</div>  
    </span>  
    <span class="marquee solid">  
        <span>are</span>  
        <span>are</span>  
        <span>&nbsp;is</span>  
        <span>are</span>  
        <span>&nbsp;is</span>  
        <div>are</div>  
    </span>  
    under attack what do We do?  
</div>  

<style>  
.marquee {  
    --text_color: black;  
    --styled_text_color: #18c16c;  
    --num_items: 5; /* 1-8, BUT you MUST also update the percentages for BOTH @keyframes below*/  
    --animation_duration: 16s;  
    --scroll_items: 1; /* 1 for YES, 2 for NO scroll */  
    --underline: underline; /* 'underline' or 'none'  */  

    --scroll_distance: calc(var(--scroll_items) * 1.2em); /* increase or decrease '1.2em' */  

    display: inline-flex;  
    position: relative;  
    overflow-y: hidden;  
    /* border: 1px solid black; */  
    /* background: green; */  
}  
.marquee > div {  
    color:transparent;  
    display:inline-block;  
    position: relative;  
}  
.marquee > span {  
    display:inline-block;  
    justify-content: middle;  
    color: transparent;  
    text-decoration: none;  
    position: absolute;  
    text-align: center;  
    width: 100%;  
    padding: 0px;  
      
    animation: flicker var(--animation_duration) infinite;  
    animation-delay: calc(var(--position) * var(--animation_duration) / var(--num_items));  
}  

.marquee.style > span {  
    --text_color: var(--styled_text_color);  
    text-decoration: var(--underline);  

}  

.marquee.solid > span {  
    animation-name: flicker-solid;  
    animation-composition: replace;  
}  

/* this one handles fade-in and scroll-in */  
@keyframes flicker {  
  0% {  /* text begins fading in, scrolling in */  
    transform: translate(0, var(--scroll_distance));  
  }  
  4.5% {  /* text is in */  
    color: var(--text_color);    
    transform: translate(0,0);  
  }  
  15% {  /* text begins fading out, scrolling out. If modifying NUM ITEMS, change this percent. */  
    transform: translate(0,0);  
    color: var(--text_color);  
  }  
  19.5% {  /* text is out. If modifying NUM ITEMS, change this percent.*/  
    color: transparent;  
    transform: translate(0, calc(var(--scroll_distance) * -1));  
  }  
  20% {  /* If modifying NUM ITEMS, change this percent. */  
    color: transparent;  
  }  
  100% {  
    color: transparent;  
  }  
}  

@keyframes flicker-solid {  
  0% {  /* text is in */  
    color: var(--text_color);  
  }  
  
  19.9999% {  /* text begins fading out. If changing NUM ITEMS, change this percent. */  
    color: var(--text_color);  
  }  
  20% {  /* text is out. If changing NUM ITEMS, change this percent. */  
    color: transparent;  
  }  
  100% {  
    color: transparent;  
  }  
}  

.marquee > span:nth-child(1){  
    --position: 0;  
}  
.marquee > span:nth-child(2){  
   --position: 1;  
}  
.marquee > span:nth-child(3){  
    --position: 2;  
}  
.marquee > span:nth-child(4){  
    --position: 3;  
}  
.marquee > span:nth-child(5){  
    --position: 4;  
}  
.marquee > span:nth-child(6){  
    --position: 5;  
}  
.marquee > span:nth-child(7){  
    --position: 6;  
}  
.marquee > span:nth-child(8){  
    --position: 7;  
}  
</style>

https://jsfiddle.net/ytrc9z4w/4/

#blog #code