如何做CSS ul li淡出文字？

.fade-out {
  opacity: 0; /* 初始透明度为0 */
  transition: opacity 1s ease; /* 设置过渡效果，持续1秒，缓动效果 */
}

<ul class="fade-out">
  <li class="fade-out">文字1</li>
  <li class="fade-out">文字2</li>
  <li class="fade-out">文字3</li>
</ul>

// 延时1秒后添加.fade-out类，实现淡出效果
setTimeout(function() {
  var elements = document.querySelectorAll('.fade-out');
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.add('fade-out');
  }
}, 1000);