View Transitions: Fixes Astro's fade animation to prevent flicker dur…

…ing morph transitions (#12046)
withastro · Sep 26, 2024 · d7779df · d7779df
1 parent 1720c5b
commit d7779df
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/.changeset/fifty-squids-build.md b/.changeset/fifty-squids-build.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+View transitions: Fixes Astro's fade animation to prevent flashing during morph transitions.
diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css
@@ -10,12 +10,22 @@
 @keyframes astroFadeIn {
 	from {
 		opacity: 0;
+		mix-blend-mode: plus-lighter;
+	}
+	to {
+		opacity: 1;
+		mix-blend-mode: plus-lighter;
 	}
 }
 
 @keyframes astroFadeOut {
+	from {
+		opacity: 1;
+		mix-blend-mode: plus-lighter;
+	}
 	to {
 		opacity: 0;
+		mix-blend-mode: plus-lighter;
 	}
 }