diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index e9fa10263..f0adf8a41 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -544,4 +544,15 @@ html {
 		padding-left: 2.5rem;
 		overflow-wrap: anywhere;
 	}
+}
+
+/* classes used for the Vue <Transition> component*/
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.2s ease-out;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
 }
\ No newline at end of file
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index f5fe32036..f4a7315c9 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -290,9 +290,11 @@ export default {
 				</div>
 				<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
 					<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" :style="hourGridStyle(hour)"></div>
-					<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
-						<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
-					</div>
+					<Transition>
+						<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
+							<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
+						</div>
+					</Transition>
 					<div>
 						<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">Keine Lehrveranstaltungen</h1>
 						<div :class="{'fhc-calendar-no-events-overlay':noEventsCondition, 'events':true}">
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index d9ef20f01..5d09556f7 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -214,9 +214,11 @@ export default {
 			</div>
 			<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
 				<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" :style="hourGridStyle(hour)"></div>
-				<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
-					<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
-				</div>
+				<Transition>
+					<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
+						<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
+					</div>
+				</Transition>
 				<div class="events">
 					<div class="hours">
 						<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>