如何淡入淡出水平滚动内容？

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 要滚动的内容 -->
  </div>
</div>

.scroll-container {
  overflow-x: scroll; /* 允许水平滚动 */
  white-space: nowrap; /* 禁止内容换行 */
}

.scroll-content {
  display: inline-block; /* 内容以行内块元素的方式显示 */
}

@keyframes fade-in-out {
  0% {
    opacity: 0; /* 初始状态为透明 */
  }
  50% {
    opacity: 1; /* 渐变为完全可见 */
  }
  100% {
    opacity: 0; /* 再次渐变为透明 */
  }
}

.scroll-content {
  animation: fade-in-out 5s infinite; /* 使用fade-in-out动画，每次动画持续5秒，无限重复 */
}

var container = document.querySelector('.scroll-container');
var content = document.querySelector('.scroll-content');

// 当内容滚动到一定距离时，重新开始滚动
container.addEventListener('scroll', function() {
  if (container.scrollLeft >= content.offsetWidth) {
    container.scrollLeft = 0;
  }
});