I am working on a div container named wrapper2 that houses a chat interface. Inside the container, there are five messages in a div called chatleft, each containing images. The height of the wrapper2 div is smaller than the combined height of all the messages.
This requires an automated animation based on time that scrolls the messages from top to bottom. For instance, when the page loads, after 5 seconds, the animation should begin and take 10 seconds to scroll down to the last message at the bottom.
Do I need to use JavaScript for this, or can it be achieved through CSS with timed animation? Could you assist me in creating this animation?
Below is the code snippet for the wrapper2 div:
#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>