css bubble chat slide up animation - css

Question

I'm trying to create chat animation using CSS only. So far, I have tried creating this. My question is how to hide a bubble when it's not their time to show up?
#keyframes slide {
from {bottom: -20px}
to {bottom: 0px}
0% { opacity: 0; }
100% { opacity: 1; }
}
Also, I figured that this is not the best approach to create chat animation. I still haven't thought about how to hide the older bubble chat when the chat is getting longer. Does anyone know what's the best approach to create this animation but using CSS only?

Answer 1

The key idea is to use a flexbox container which flex-direction: column-reverse so the messages are always bottom-anchored. Doing so you need to insert the markup of the whole chat in reverse order.
The container has a ::before pseudoelement stacked on top with a gradient as a background, so, while the conversation is scrolling, the messages seem to disappear on the top area.
The animation on the messages can be done using a different animation-delay for each message and animation-fill-mode: forwards to keep the values of the last keyframe.
*, *::before {
box-sizing: border-box;
}
.chat {
display: flex;
flex-direction: column-reverse;
height: 12rem;
overflow: hidden;
border: 1px #ccc dashed;
font: .85rem/1.5 Arial;
color: #313131;
position: relative;
}
.chat::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
height: 40%;
width: 100%;
background: linear-gradient(to bottom, white 20%, rgba(255, 255, 255, 0)) repeat-x;
}
.chat p {
margin: 0;
padding: 0;
}
.chat__content {
flex: 0 1 auto;
padding: 1rem;
margin: 0 0.5rem;
background: var(--bgcolor);
border-radius: var(--radius);
}
.chat__message {
width: 45%;
display: flex;
align-items: flex-end;
transform-origin: 0 100%;
padding-top: 0;
transform: scale(0);
max-height: 0;
overflow: hidden;
animation: message 0.15s ease-out 0s forwards;
animation-delay: var(--delay);
--bgcolor: #d8d8d8;
--radius: 8px 8px 8px 0;
}
.chat__message_B {
flex-direction: row-reverse;
text-align: right;
align-self: flex-end;
transform-origin: 100% 100%;
--bgcolor: #d2ecd4;
--radius: 8px 8px 0 8px;
}
.chat__message::before {
content: "";
flex: 0 0 40px;
aspect-ratio: 1/1;
background: var(--bgcolor);
border-radius: 50%;
}
#keyframes message {
0% {
max-height: 100vmax;
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
max-height: 100vmax;
overflow: visible;
padding-top: 1rem;
}
}
<section class="chat">
<div class="chat__message chat__message_B" style="--delay: 18s;">
<div class="chat__content">
<p>Thank you.</p>
</div>
</div>
<div class="chat__message chat__message_A" style="--delay: 13s;">
<div class="chat__content">
<p>Mr.Doe, your current balance is $19,606.76</p>
</div>
</div>
<div class="chat__message chat__message_A" style="--delay: 10s;">
<div class="chat__content">
<p>Sure, let me check...</p>
</div>
</div>
<div class="chat__message chat__message_B" style="--delay: 6s;">
<div class="chat__content">
<p>Hi jane, I'm John Doe. <br />
I need to know my current account balance</p>
</div>
</div>
<div class="chat__message chat__message_A" style="--delay: 1s;">
<div class="chat__content">
<p>Hello, my name is Jane.<br />
How can I help you?</p>
</div>
</div>
</section>