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

Question

我想知道我的新网站上有横幅，但我无法弄清楚如何做或从哪里开始，所以我们将非常感谢任何帮助。

以下是我的想法：

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

第一个动画是一些文字，一个圆圈是从屏幕左侧滑入。

第二个动画将是当前屏幕上的文本向右滑动并在它到达已存在的圆形图像之前逐渐消失，同时新文本可以滑入。与文本一起，第二个较小的圆圈将滑入并停在较旧的较大圆圈之上。

第三个动画只是第二个动画的重复，但是圆圈图像较小。

实施例：

再一次任何帮助都会很棒，对任何以前的困惑都很抱歉。

非常感谢Crackruckles。

Answer 1

这是一个类似的，你可以做一些适合你的口味的工作。

Sample

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

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

CSS：

     @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;
}

Answer 2

你可能想看看jquery ui toggle（）。 这里有一个简单的例子https://jquerytipsntricks.wordpress.com/2013/07/21/slide-toggle-from-right-to-left-and-left-to-right-using-jquery-ui/comment-page-1/