Javascript 需要导航栏上的字母在单击时褪色我应该使用什么

在我的网站上，我想让我的导航栏列表文本从右向左淡入，就像这个网站一样，当你点击3个栏时，字母从右向左。我想在我的网站上应用同样的效果，因此，我只想从这里得到一些建议，甚至是CSS或javascript的解决方案，或是你们认为可以让它看起来更流畅的任何东西，以及一些易于使用和定制的东西，通过CSS制作动画怎么样

HTML

函数openBar（）{
Nav=document.getElementById（'navegador'）；
如果（导航类名称=“”）{
Nav.className='open'；
}否则{
类名称=“”；
}
}

#纳维加多{
保证金：0；
填充：12px 56px 12px 12px；
列表样式：无；
文本对齐：右对齐；
背景色：#f0f；
过渡：所有100毫秒轻松；
不透明度：0；
}
#纳维加多利{
不透明度：0；
显示：内联块；
利润率：0.14px；
颜色：#fff；
不透明度：0；
过渡：所有800ms缓解；
}
.图标菜单{
位置：固定；
右：25px；
顶部：18px；
文字装饰：无；
颜色：#0800ff；
字体大小：粗体；
字体大小：1.2米；
z指数：300；
}
#纳维加多公开赛{
不透明度：1
}
#纳维加多，李开复{
动画：aparecer.5s ease 1；/*命名动画、持续时间动画、计时线动画和重复动画*/
动画填充模式：正向；
}
/*根据项目上的位置延迟动画*/
body ul#navegador li:type（1）的第n个最后一个{动画延迟：.1s！重要；}
body ul#navegador li:type（2）的第n个最后一个{动画延迟：.3s！重要；}
body ul#navegador li:类型（3）的第n个最后一个{动画延迟：.5s！重要；}
body ul#navegador li:类型（4）的第n个最后一个{动画延迟：.9s！重要；}
@关键帧分光镜{
0%{变换：translateX（20px）；不透明度：0}
100%{变换：translateX（0px）；不透明度：1；}
}

菜单1
菜单2
菜单3

我使用了W3动画，效果很好