Javascript CSS文本样式-使用数字1和0的动画填充文本-HTML

我正在尝试做以下工作，但不确定这是否可能/如何着手进行。是否可以在CSS样式中制作此动画

下面是HTML-我正在尝试生成一些动画，用数字1和0填充以下文本。我已经设法得到一些javascript来为1,0创建动画，但不知道如何用文本填充“开发者”来组成每个字母

var outputbinary=document.querySelector（“.output”）；
var optionsarray=[0,1]；
var二进制数组=[]；
setInterval（函数（）{
if（binaryarray.length此示例从一系列的0和1生成字母，将它们添加到页面中，然后淡入淡出

每个列表项都有一个容器，使用CSS网格显示子单元


const映射={
D:'1111010001100011110'，
E:'111111000011101000011111'，
V:‘10000110001100010101000100’，
O：‘0111010001100011000101110’，
L:'10000100001000011111'，
P:'111101000111101000010000'，
R:'111101000111101000110001'
};
//抓取字母和的二进制映射
//返回一些HTML
函数二进制（字母）{
const arr=映射[letter]。拆分（“”）；
返回arr.map（char=>`${char}`）。join（“”）；
}
//为单词中的每个字母创建一个
//二进制版本，并将其返回到列表项容器中
函数处理字（arr）{
const items=arr.map（（字母i）=>{
const binarysised=binaryse（字母）；
返回`

${binaryised}

`;
}).加入（“”）；
返回`${items}`；
}
//获取以前未出现的随机数
函数getRandom（arr、memo）{
const index=Math.floor（Math.random（）*arr.length）；
返回备忘录。包括（索引）？getRandom（arr，备忘录）：索引；
}
//将html添加到页面后
//（全部设置为不透明度为0）
//在旋转的字母上迭代
//每种颜色的不透明度为1
功能显示字母（arr、备忘录）{
备忘录=备忘录| |[]；
if（memo.length！==arr.length）{
常数索引=getRandom（arr，备忘录）；
常量字母=arr[索引]；
const el=document.querySelector（`[data id=“${index}”]`）；
设置超时（（）=>{
el.classList.add（'show'）；
推送（索引）；
展示信（arr、备忘录）；
}, 1000);
}
}
var wordArr='Developer'.toUpperCase（）.split（''）；
//处理单词的所有字母并添加它们
//到页面。。。
const html=processWord（wordArr）；
insertAdjacentHTML（'beforeend'，html）；
//…然后淡入淡出
showLetters（wordArr）；
ul{
宽度：100%；
显示器：flex；
弯曲方向：行；
列表样式类型：无；
}
李{
显示：内联块；
右边距：1米；
不透明度：0；
}
.集装箱{
宽度：30px；
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr；
}
.表演{
不透明度：1；
过渡：线性；
}
.零{
不透明度：0.2；
}
我不理解这个问题。你想把“开发者”变成什么？我想让开发者以某种方式动画化。我希望每个字母都淡入屏幕，而不是有一个css样式的颜色，例如灰色……我希望数字1和0使每个字母都变成纯色。这有意义吗？我制作了一个ed这就是你的问题-这就是你的意思吗？如果不是-滚回去。这正是我的意思..谢谢。我很高兴它在一个字母上交替1,0