From d7779dfae7bc00ff94b1e4596ff5b4897f65aabe Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:14:00 +0200
Subject: [PATCH] View Transitions: Fixes Astro's fade animation to prevent
 flicker during morph transitions (#12046)

---
 .changeset/fifty-squids-build.md              |  5 +++++
 packages/astro/components/viewtransitions.css | 10 ++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 .changeset/fifty-squids-build.md

diff --git a/.changeset/fifty-squids-build.md b/.changeset/fifty-squids-build.md
new file mode 100644
index 0000000000..cc0678a56d
--- /dev/null
+++ 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
index 953f462e9c..36fd441769 100644
--- 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;
 	}
 }