chat animation only css(채팅 애니메이션)

 

<section class="chat-container">
    <div class="chat-box">
      
      <div class="chat-message chat-message-A">
        <p>text1</p>   
      </div>
  
      <div class="chat-message chat-message-B">
        <p>text2</p>   
      </div>
      
      <div class="chat-message chat-message-A">
        <p>text3</p>   
      </div>  
  
      <div class="chat-message chat-message-A">
        <p>text4</p>   
      </div>
  
      <div class="chat-message chat-message-B">
        <p>text5</p>   
      </div>
      
    </div>
  </section>

*, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}

.chat-container {display:flex; flex-direction:column-reverse; position:relative; width:500px; height:300px; margin:50px auto 0; overflow:hidden; border:1px solid red;}
.chat-container::before {content:''; position:absolute; top:0; width:100%; height:10%; z-index:1; background:linear-gradient(to bottom, #fff 10%, transparent);}
.chat-container > .chat-box {display:flex; flex-direction:column;}
.chat-container > .chat-box > .chat-message {display:flex; max-height:0; margin-top:20px; transform:scale(0); overflow:hidden; animation: message 0.15s ease-in-out forwards; overflow:hidden;}
.chat-container > .chat-box > .chat-message.chat-message-A {margin-left:60px; transform-origin:0 100%;}
.chat-container > .chat-box > .chat-message.chat-message-B {justify-content:flex-end; margin-right:60px; transform-origin:100% 100%;}
.chat-container > .chat-box > .chat-message:nth-child(1) {animation-delay:0s;}
.chat-container > .chat-box > .chat-message:nth-child(2) {animation-delay:1.5s;}
.chat-container > .chat-box > .chat-message:nth-child(3) {animation-delay:3s;}
.chat-container > .chat-box > .chat-message:nth-child(4) {animation-delay:4.5s;}
.chat-container > .chat-box > .chat-message:nth-child(5) {animation-delay:6s;}
.chat-container > .chat-box > .chat-message > p {position:relative; padding:10px 20px; font-weight:500; font-size:20px;}
.chat-container > .chat-box > .chat-message.chat-message-A > p {text-align:left; background:royalblue;}
.chat-container > .chat-box > .chat-message.chat-message-B > p {text-align:left; background:orange;}

/* 챗 유저 아이콘(동그라미) */
.chat-container > .chat-box > .chat-message > p::before {content:''; display:block; position:absolute; top:0; width:30px; height:30px; border-radius:50%;}
.chat-container > .chat-box > .chat-message.chat-message-A > p::before {left:-50px; background:royalblue;}
.chat-container > .chat-box > .chat-message.chat-message-B > p::before {right:-50px; background:orange;}
/* 챗 말풍선 꼬다리 */
.chat-container > .chat-box > .chat-message > p::after {content:''; display:block; position:absolute; top:4px; border-top:0.406rem solid transparent; border-bottom:0.406rem solid transparent;}
.chat-container > .chat-box > .chat-message.chat-message-A > p::after {left:-15px; border-right:0.938rem solid royalblue;}
.chat-container > .chat-box > .chat-message.chat-message-B > p::after {right:-15px; border-left:0.938rem solid orange;}

@keyframes message {
  80% {transform:scale(1.1);}
  100% {
    transform:scale(1);
    max-height:100vmax;
    overflow:visible;
  }
}

참고사이트에서는 채팅박스를 한번만 감싸고 column-reverse를 주어 HTML 구조 자체를 역순으로 마크업 하였지만 한번 더 감싸고 그것을 다시 column을 주면 마크업을 역순으로 하지 않아도 된다.

 

결과

첨부파일

chatAnimation.zip

0.00MB

 

 

참고사이트

https://stackoverflow.com/questions/66472149/css-bubble-chat-slide-up-animation