Javascript 如何以幻灯片方式将图像和文本移动到页面上

我有一个在我的新网站的横幅的想法，但我不知道如何做，或从哪里开始，所以任何帮助将不胜感激

以下是我的想法：

我有三个圆形图像和一些文本，我想用动画从左到右滑动到屏幕上

第一个动画是一些文本和一个圆圈从屏幕左侧滑入

第二个动画是，当前屏幕上的文本向右滑动，并在其击中已存在的圆圈图像之前逐渐消失，同时新文本滑入。随着文本，第二个较小的圆圈将滑入，并停在旧的较大圆圈的顶部

第三个动画将只是第二个动画的重复，但具有较小的圆形图像

例如：

再一次，任何帮助都将是巨大的，并且为之前的任何困惑感到抱歉

---

非常感谢Crackruckles。

这里有一个类似的，你可以做一些工作来适应你的口味

---

您可能想看看jQueryUI切换。

---

这里有一个简单的例子

我已经有了三个圆圈，我知道把它们放在哪里。我只需要弄清楚如何制作动画。真的，如果我对这一点很清楚的话，很抱歉，不过还是要谢谢你。

<div class="one">
  <div class="two">
    <div class="three">

    </div>
  </div>
</div>

     @keyframes toright {
  from {
    right: 600px;
  }
  to {
    right: 0;
  }
}

.container {
  padding: 0;
  height: 100px;
  width: 600px;
  border: 1px solid red; 
  vertical-align:middle;
  position: relative;
}

.container  div {
  display: inline-block;  
  background: rgba(0,0,255,0.3);
  border-radius: 50%;
  position: absolute;
  right: 0;
  top:5px;
}

.one {
  width: 70px;
  height: 60px;
  animation: 1s toright ease;
}
.two { 
  width: 60px;
  height: 50px;
  animation: 1.3s toright ease;
}
.three {
  width: 50px;
  height: 40px;
  animation: 1.5s toright ease;
}