diff --git a/ui/Makefile b/ui/Makefile
index f1481f748..a68055491 100644
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -22,7 +22,7 @@ npm-fetch: $(NODE_INSTALL)
 $(NODE_PATH)/%: $(NODE_INSTALL)
 	@if [ ! -x $@ ]; then echo "missing script: $@" ; exit 1; fi
 
-build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js
+build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js restore-css
 	@rm -fr node_modules/.cache/eslint-loader
 	cat node_modules/bootstrap/scss/_root.scss | sed s/':root {'/'* {'/ > src/Styles/BootstrapRoot.scss
 	npm run build
@@ -62,6 +62,10 @@ backup-css:
 	rm -fr build.pre/static/*
 	cp -R build/static/css build.pre/static/css
 
+.PHONY: restore-css
+restore-css:
+	@(test -d build.pre/static/css && rm -fr build/static/css && cp -R build.pre/static/css build/static/css) || echo
+
 build.pre/css.diff: build purgecss.config.js
 	npx prettier -w build.pre/static/css/*.css build/static/css/*.css
 	diff -uNr build.pre/static/css build/static/css > build.pre/css.diff || echo
diff --git a/ui/src/Components/Grid/AlertGrid/Grid.tsx b/ui/src/Components/Grid/AlertGrid/Grid.tsx
index 90b37d02c..59924e28c 100644
--- a/ui/src/Components/Grid/AlertGrid/Grid.tsx
+++ b/ui/src/Components/Grid/AlertGrid/Grid.tsx
@@ -151,7 +151,7 @@ const Grid: FC<{
                   key={group.id}
                   classNames={
                     context.animations.duration
-                      ? "components-animation-fade"
+                      ? "components-animation-alergroup"
                       : ""
                   }
                   timeout={context.animations.duration}
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.tsx b/ui/src/Components/Grid/AlertGrid/index.test.tsx
index 13a5b7f51..8da045951 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.tsx
+++ b/ui/src/Components/Grid/AlertGrid/index.test.tsx
@@ -211,7 +211,7 @@ describe("<Grid />", () => {
     const tree = MountedGrid(MockThemeContext);
     expect(
       tree.find("div.components-grid-alertgrid-alertgroup").html()
-    ).toMatch(/animate components-animation-fade-appear/);
+    ).toMatch(/animate components-animation-alergroup-appear/);
   });
 
   it("doesn't use animations when settingsStore.themeConfig.config.animations is false", () => {
@@ -222,7 +222,7 @@ describe("<Grid />", () => {
     const tree = MountedGrid(MockThemeContextWithoutAnimations);
     expect(
       tree.find("div.components-grid-alertgrid-alertgroup").html()
-    ).not.toMatch(/animate components-animation-fade-appear/);
+    ).not.toMatch(/animate components-animation-alertgroup-appear/);
   });
 
   it("renders all alert groups", () => {
diff --git a/ui/src/Styles/Components/_AlertGroup.scss b/ui/src/Styles/Components/_AlertGroup.scss
index 87f449fc6..f76c9712c 100644
--- a/ui/src/Styles/Components/_AlertGroup.scss
+++ b/ui/src/Styles/Components/_AlertGroup.scss
@@ -1,11 +1,11 @@
 .components-grid-alertgrid-alertgroup {
   padding: 0.3rem;
 
-  &.components-animation-fade-appear-done.animate,
-  &.components-animation-fade-enter-done.animate {
+  &.components-animation-alergroup-appear-done.animate,
+  &.components-animation-alergroup-enter-done.animate {
     z-index: 1;
     transition-property: transform;
-    transition-duration: 0.4s;
+    transition-duration: 0.25s;
     transition-timing-function: ease-in-out;
   }
 }
diff --git a/ui/src/Styles/Components/_Fade.scss b/ui/src/Styles/Components/_Fade.scss
index 7d6071b4f..55c2b1dd4 100644
--- a/ui/src/Styles/Components/_Fade.scss
+++ b/ui/src/Styles/Components/_Fade.scss
@@ -14,6 +14,15 @@ $duration: 0.5s;
   opacity: 1;
 }
 .components-animation-fade-exit-active {
-  opacity: 0.01;
+  opacity: 0;
   transition: opacity $duration ease-out;
 }
+
+@keyframes alert-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/ui/src/Styles/Components/_FadeAlertGroup.scss b/ui/src/Styles/Components/_FadeAlertGroup.scss
new file mode 100644
index 000000000..dcf8580d0
--- /dev/null
+++ b/ui/src/Styles/Components/_FadeAlertGroup.scss
@@ -0,0 +1,21 @@
+@use "sass:math";
+
+$duration: 0.5s;
+
+.components-animation-alergroup-appear,
+.components-animation-alergroup-enter {
+  opacity: 0;
+}
+.components-animation-alergroup-appear-active,
+.components-animation-alergroup-enter-active {
+  opacity: 1;
+  transition: opacity math.div($duration, 2) ease-in math.div($duration, 2);
+}
+
+.components-animation-alergroup-exit {
+  opacity: 1;
+}
+.components-animation-alergroup-exit-active {
+  opacity: 0;
+  transition: opacity $duration ease-out;
+}
diff --git a/ui/src/Styles/Components/_index.scss b/ui/src/Styles/Components/_index.scss
index ef3ae83d1..493953b95 100644
--- a/ui/src/Styles/Components/_index.scss
+++ b/ui/src/Styles/Components/_index.scss
@@ -27,3 +27,4 @@
 @import "./Toast";
 @import "./WithClick";
 @import "./Flash";
+@import "./FadeAlertGroup";