时间戳

首页 > 解决方案 > div Container 中的自动滚动动画

html - div Container 中的自动滚动动画

问题描述

我有一个名为的 div 容器wrapper2，其中包含类似聊天的内容。div容器中有5条消息，chatleft其中包含图片，divwrapper2小于所有消息的总和。

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

如果我需要为动画计时，我是否需要 javascript，或者是否可以在 CSS 中对其进行动画处理？你能帮我把它动画化吗？

这是divwrapper2

#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>

标签： htmlcss

解决方案

我不知道有什么方法可以用 CSS 做你想做的事。我总是在js中使用滚动功能

element.scroll(x-coord, y-coord)

更多文档在这里

您可以将其与↓配对以获得您想要的

setTimeout(
  function(){
    // do stuff (propably scroll in your case)
  },
  [time in miliseconds]
)

JQuery 库对于动画也非常方便

$("html, body").animate({
  scrollTop: "500px"
});

推荐阅读