Automated scroll animation in div Container - html

Question

I have a div container called wrapper2 that contains something like a chat. There are like 5 messages in div container called chatleft which contain pictures, the div wrapper2 is smaller than all the messages together.
That means I would need a time based automated animation that scrolls down the messages from top to bottom. Just like when the page opens, after 5 seconds the animation should start and need 10 seconds to scroll down to the last message at the bottom.
Do I need javascript for it, or is it possible to animate it in CSS, if I need to time the animation?
Can you help me to get it animated?
Here's the div wrapper2
#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>

Answer 1

I'm not aware of any way to do what you want with CSS.
I always use the scroll function in js
element.scroll(x-coord, y-coord)
More documentation here
You can pair that with ↓ to get what you want
setTimeout(
function(){
// do stuff (propably scroll in your case)
},
[time in miliseconds]
)
The JQuery library is really handy for animations too
$("html, body").animate({
scrollTop: "500px"
});