diff --git a/src/App.vue b/src/App.vue
index 285c445ac..71b56feaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 150, leave: 150 }" name="route-fade" mode="out-in">
+    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
+      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
       <component :is="Component" />
     </transition>
   </router-view>
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index e247f3ded..c03c267ab 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -12,11 +12,11 @@
 }
 
 .route-fade-enter-active .fade-on-route-transition {
-    transition: opacity 0.8s ease;
+    transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-leave-active .fade-on-route-transition {
-    transition: opacity 0.3s ease; 
+    transition: opacity 0.2s ease-in;  //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-enter-from .fade-on-route-transition,