怎样仅使用CSS制作动画横幅，时间轴乱了。

要使用CSS制作动画横幅，可以使用CSS的@keyframes规则来定义动画，并使用animation属性将动画应用于横幅元素。以下是一个简单的示例代码：

HTML代码：

<div class="banner"></div>

CSS代码：

.banner {
  width: 100%;
  height: 100px;
  background-color: #e0e0e0;
  animation: bannerAnimation 5s linear infinite;
}

@keyframes bannerAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50%);
    background-color: #ffcc00;
  }
  100% {
    transform: translateX(100%);
    background-color: #e0e0e0;
  }
}

在上面的代码中，我们首先定义了一个具有宽度、高度和背景颜色的横幅元素。然后，我们使用animation属性将名为bannerAnimation的动画应用于横幅。该动画在5秒内以线性方式无限循环播放。

接下来，我们使用@keyframes规则来定义动画的关键帧。在这个例子中，我们定义了三个关键帧：0%、50%和100%。在0%关键帧，横幅的位置是原始位置。在50%关键帧，横幅向右移动50%的距离，并改变背景颜色。在100%关键帧，横幅向右移动100%的距离并恢复原始背景颜色。

使用上述代码，你可以创建一个简单的动画横幅。如果你的时间轴乱了，可能是因为你没有正确定义关键帧的百分比值或动画持续时间。你可以根据需要调整这些值，以获得你想要的效果。