diff --git a/src/components/WidgetSkillsTransitionWrapper.vue b/src/components/WidgetSkillsTransitionWrapper.vue
index e370f06..be306ff 100644
--- a/src/components/WidgetSkillsTransitionWrapper.vue
+++ b/src/components/WidgetSkillsTransitionWrapper.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="relative min-h-[18rem] fade-transition-wrapper">
-		<transition name="fade" appear>
+	<div class="relative min-h-[18rem]">
+		<transition name="fade" appear mode="out-in">
 			<WidgetSkillsSkeletonPartial v-if="isLoading || !profile" key="skeleton" />
 			<WidgetSkillsPartial v-else key="skills" :skills="profile.skills" />
 		</transition>
diff --git a/src/components/WidgetSocialTransitionWrapper.vue b/src/components/WidgetSocialTransitionWrapper.vue
index e1651af..cb0bc19 100644
--- a/src/components/WidgetSocialTransitionWrapper.vue
+++ b/src/components/WidgetSocialTransitionWrapper.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="relative min-h-[200px] fade-transition-wrapper">
-		<transition name="fade" appear>
+	<div class="relative min-h-[200px]">
+		<transition name="fade" appear mode="out-in">
 			<WidgetSocialSkeletonPartial v-if="isLoading" key="skeleton" />
 			<WidgetSocialPartial v-else key="social" :social="social" />
 		</transition>
diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index fd1ec50..801fe4f 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -234,23 +234,3 @@
 .fade-leave-active {
 	pointer-events: none;
 }
-
-/* Transition wrapper - makes elements overlay during crossfade */
-.fade-transition-wrapper {
-	display: grid;
-}
-
-.fade-transition-wrapper > * {
-	grid-column: 1;
-	grid-row: 1;
-}
-
-/* Entering element appears on top, leaving element (skeleton) stays visible underneath */
-/* Scoped to wrapper to avoid breaking z-index on dialogs/overlays */
-.fade-transition-wrapper .fade-enter-active {
-	z-index: 2;
-}
-
-.fade-transition-wrapper .fade-leave-active {
-	z-index: 1;
-}
diff --git a/src/pages/AboutPage.vue b/src/pages/AboutPage.vue
index 9b1fbd3..b9744c4 100644
--- a/src/pages/AboutPage.vue
+++ b/src/pages/AboutPage.vue
@@ -52,8 +52,8 @@
 
 										<div class="mt-5 space-y-5">
 											<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Let's Connect</h2>
-											<div class="relative min-h-[5rem] fade-transition-wrapper">
-												<transition name="fade" appear>
+											<div class="relative min-h-[5rem]">
+												<transition name="fade" appear mode="out-in">
 													<p v-if="profile" key="connect">
 														I'm happy to connect by
 														<a v-lazy-link class="blog-link" title="send me an email" aria-label="send me an email" :href="`mailto:${profile.email}`"> email </a>
diff --git a/src/pages/PostPage.vue b/src/pages/PostPage.vue
index 0fb71fb..8173511 100644
--- a/src/pages/PostPage.vue
+++ b/src/pages/PostPage.vue
@@ -27,9 +27,9 @@
 									</RouterLink>
 								</div>
 
-								<div class="relative min-h-[25rem] fade-transition-wrapper">
-									<transition name="fade" appear>
-										<PostPageSkeletonPartial v-if="isLoading" key="skeleton" aria-hidden="true" />
+								<div class="relative min-h-[25rem]">
+									<transition name="fade" appear mode="out-in">
+										<PostPageSkeletonPartial v-if="isLoading" key="skeleton" />
 
 										<article v-else-if="post" key="post">
 											<!-- Post header -->
diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index d10339c..65992b3 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -30,8 +30,8 @@
 										</div>
 										<section>
 											<h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
-											<div class="relative min-h-[25rem] fade-transition-wrapper">
-												<transition name="fade" appear>
+											<div class="relative min-h-[25rem]">
+												<transition name="fade" appear mode="out-in">
 													<div v-if="isLoadingProjects" key="loading" data-testid="projects-skeleton-grid" class="blog-projects-grid">
 														<ProjectCardSkeletonPartial
 															v-for="index in skeletonCount"
diff --git a/src/pages/ResumePage.vue b/src/pages/ResumePage.vue
index 1dec6be..66f79f8 100644
--- a/src/pages/ResumePage.vue
+++ b/src/pages/ResumePage.vue
@@ -29,8 +29,8 @@
 										</a>
 									</nav>
 									<!-- Page content -->
-									<div class="text-slate-500 dark:text-slate-400 relative fade-transition-wrapper">
-										<transition name="fade" appear>
+									<div class="text-slate-500 dark:text-slate-400 relative">
+										<transition name="fade" appear mode="out-in">
 											<div v-if="shouldShowSkeleton" key="skeleton" :class="['space-y-12', resumeSectionsTotalHeight]">
 												<ResumePageSkeletonPartial :show-refresh-button="hasProfileError" @retry="refreshResumePage" />
 											</div>
diff --git a/src/pages/TagPostsPage.vue b/src/pages/TagPostsPage.vue
index 594a045..fde3940 100644
--- a/src/pages/TagPostsPage.vue
+++ b/src/pages/TagPostsPage.vue
@@ -45,8 +45,8 @@
 
 										<section role="status">
 											<h2 class="font-aspekta text-xl font-[650] mb-6">Articles</h2>
-											<div class="relative min-h-[20rem] fade-transition-wrapper">
-												<transition name="fade" appear>
+											<div class="relative min-h-[20rem]">
+												<transition name="fade" appear mode="out-in">
 													<div v-if="isLoading" key="skeleton" class="space-y-5" data-testid="tag-posts-skeleton">
 														<ArticleItemSkeletonPartial v-for="skeleton in skeletonCount" :key="`tag-post-skeleton-${skeleton}`" />
 													</div>
diff --git a/src/partials/ArticlesListPartial.vue b/src/partials/ArticlesListPartial.vue
index 4a11929..1c48a1f 100644
--- a/src/partials/ArticlesListPartial.vue
+++ b/src/partials/ArticlesListPartial.vue
@@ -21,8 +21,8 @@
 		</ul>
 
 		<!-- Articles list -->
-		<div class="relative min-h-[24rem] fade-transition-wrapper">
-			<transition name="fade" appear>
+		<div class="relative min-h-[24rem]">
+			<transition name="fade" appear mode="out-in">
 				<div v-if="isLoading" key="skeleton" aria-busy="true" class="min-h-[24rem]">
 					<ArticleItemSkeletonPartial v-for="skeleton in skeletonCount" :key="`article-skeleton-${skeleton}`" />
 				</div>
diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index da60dfa..57545d1 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -3,8 +3,8 @@
 		<h2 class="font-aspekta text-xl font-[650] mb-5">Open-Source Projects</h2>
 
 		<!-- Cards -->
-		<div class="relative min-h-[300px] fade-transition-wrapper">
-			<transition name="fade" appear>
+		<div class="relative min-h-[300px]">
+			<transition name="fade" appear mode="out-in">
 				<div v-if="isLoading" key="loading" class="blog-projects-grid">
 					<ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" wrapper-class="odd:-rotate-1 even:rotate-1" />
 				</div>
diff --git a/src/partials/TalksPartial.vue b/src/partials/TalksPartial.vue
index e5f3e84..09e16f8 100644
--- a/src/partials/TalksPartial.vue
+++ b/src/partials/TalksPartial.vue
@@ -3,8 +3,8 @@
 		<h2 class="font-aspekta text-xl font-[650] mb-5">Popular Talks</h2>
 
 		<!-- Cards -->
-		<div class="relative min-h-[300px] fade-transition-wrapper">
-			<transition name="fade" appear>
+		<div class="relative min-h-[300px]">
+			<transition name="fade" appear mode="out-in">
 				<div v-if="isLoadingTalks || talks.length === 0" key="skeleton" class="blog-projects-grid">
 					<TalkCardSkeletonPartial v-for="index in 4" :key="`talk-skeleton-${index}`" :is-animated="isLoadingTalks && talks.length === 0" />
 				</div>