diff --git a/src/renderer/assets/timeline-transition.scss b/src/renderer/assets/timeline-transition.scss
new file mode 100644
index 0000000000..7561966a15
--- /dev/null
+++ b/src/renderer/assets/timeline-transition.scss
@@ -0,0 +1,9 @@
+.timeline-enter-active, .timeline-leave-active {
+  transition: all 0.1s;
+}
+.timeline-enter, .timeline-leave-to {
+  opacity: 0;
+}
+.timeline-move {
+  transition: transform 0.1s;
+}
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index f2647b74e4..6261ae5ac1 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -1,8 +1,10 @@
 <template>
   <div id="home">
-    <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
-      <toot :message="message" :key="message.id"></toot>
-    </div>
+    <transition-group name="timeline" tag="div">
+      <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
+        <toot :message="message" :key="message.id"></toot>
+      </div>
+    </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
@@ -62,3 +64,4 @@ export default {
   height: 0;
 }
 </style>
+<style src="@/assets/timeline-transition.scss"></style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 6dc3df0f17..f782de8e52 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -1,8 +1,10 @@
 <template>
   <div id="local">
-    <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
-      <toot :message="message" v-on:update="updateToot"></toot>
-    </div>
+    <transition-group name="timeline" tag="div">
+      <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
+        <toot :message="message" v-on:update="updateToot"></toot>
+      </div>
+    </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
@@ -92,3 +94,4 @@ export default {
   height: 0;
 }
 </style>
+<style src="@/assets/timeline-transition.scss"></style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 2444adac4c..0ea511a032 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -1,8 +1,10 @@
 <template>
   <div id="public">
-    <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
-      <toot :message="message" v-on:update="updateToot"></toot>
-    </div>
+    <transition-group name="timeline" tag="div">
+      <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
+        <toot :message="message" v-on:update="updateToot"></toot>
+      </div>
+    </transition-group>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
     </div>
   </div>
@@ -92,3 +94,4 @@ export default {
   height: 0;
 }
 </style>
+<style src="@/assets/timeline-transition.scss"></style>