[Design] 챗봇 메시지 애니메이션 효과 추가

Likelion-YeungNam-Univ · Aug 17, 2023 · 113bab6 · 113bab6
1 parent 82f3963
commit 113bab6
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/styles/home/Chatbot-styled.js b/src/styles/home/Chatbot-styled.js
@@ -9,6 +9,7 @@ const ChatbotContainer = styled.div`
 
   .chatbot {
     max-width: 368px;
+
     .chatbot-img {
       position: absolute;
       right: 0;
@@ -24,6 +25,19 @@ const ChatbotContainer = styled.div`
     }
 
     .speech-bubble {
+      animation: 0.5s slide-down ease-in-out;
+
+      @keyframes slide-down {
+        from {
+          opacity: 0;
+          transform: translateY(1rem);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
       z-index: 10001;
       position: relative;
       right: -16px;