我有一个名为wrapper2的div容器，它包含类似聊天的内容。 在名为chatleft的div容器中有5条包含图片的消息，div的wrapper2比所有消息加起来都小。

这意味着我需要一个基于时间的自动动画，从上到下滚动消息。 就像当页面打开时，5秒后动画应该开始，需要10秒向下滚动到底部的最后一条消息。

我是否需要javascript为它，或者是否有可能在CSS中动画它，如果我需要时间动画？ 你能帮我把它弄成动画吗？

下面是divwrapper2

null

#wrapper2 {
  

  margin: 0;
  padding: 40px;
  float: left;
  height: 740px;
  width: 600px;
  background-color: #fff;
  border-top: 7px solid #000CFF;
  border-left: 7px solid #000CFF;
  border-right: 7px solid #000CFF;
  bottom: 0px;
  background-image:

 url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg)
}

.chatleft:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 24px solid transparent;
border-right-color: #ccc;
border-left: 0;
margin-top: -24px;
margin-left: -24px;
}

.chatleft:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 24px solid transparent;
border-right-color: #ccc;
border-left: 0;
margin-top: -24px;
margin-left: -24px;
}

<div id="wrapper2">

</div>
<div class="chatleft">
  <p>Hi, <br> here's the text:
  </p>

</div>
<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>
<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>

<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>

<div class="chatleft">
  <img src="../bilder/smartwatch.png">

</div>
</div>

null