appear animation v1

src/components/inputItem.vue

@@ -1,10 +1,15 @@
 <template>
+
   <div id=inputItem
     class="input-item playing"
-    :style="{ top: `${elementY}px`, left: `${elementX}px` }">
+    :style="{ top: `${elementY}px`, left: `${elementX}px` }"
+  >
+
     <span class="play"></span>
     <span class="pause"></span>
+
   </div>
+  
 </template>
 
 <script lang="ts">

src/components/messageItem.vue

@@ -42,16 +42,21 @@
 </template>
 
 <script lang='ts'>
+
  import {defineComponent} from 'vue';
+
  export default defineComponent({
   name: "MessageItem",
+
   props: {
       message: {
         type: Object,
         required: true
       } 
   }
+
  })
+
 </script>
 
 <style lang="scss" scoped>
@@ -119,6 +124,10 @@
     padding: 10px;
 
     border-radius: 10px;
+
+    // Animate on render.
+    animation-name: appear;
+    animation-duration: 0.25s;
   }
 
   #aiBubble {
@@ -160,4 +169,13 @@
     border-radius: 15px;
   }
 
+  @keyframes appear {
+    from {
+      transform: scale(0.3);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
 </style>