diff --git a/assets/css/src/components-public/_animation.scss b/assets/css/src/components-public/_animation.scss
index d9111804dc..a4c9f3739e 100644
--- a/assets/css/src/components-public/_animation.scss
+++ b/assets/css/src/components-public/_animation.scss
@@ -1,3 +1,16 @@
+.mailpoet_form_overlay_animation {
+  animation: fade-in-overlay 1s 1 cubic-bezier(.77, 0, .175, 1);
+}
+
+@keyframes fade-in-overlay {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: .7;
+  }
+}
 
 .mailpoet_form_animation_slideup {
   animation: slide-up 1s 1 cubic-bezier(.77, 0, .175, 1);
@@ -35,10 +48,6 @@
   animation: fade-in 1s 1 cubic-bezier(.77, 0, .175, 1);
 }
 
-.mailpoet_form_overlay_animation_fadein {
-  animation: fade-in-overlay 1s 1 cubic-bezier(.77, 0, .175, 1);
-}
-
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -49,16 +58,6 @@
   }
 }
 
-@keyframes fade-in-overlay {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: .7;
-  }
-}
-
 .mailpoet_form_animation_slideright {
   animation: slide-right 1s 1 cubic-bezier(.77, 0, .175, 1);
 }
diff --git a/assets/js/src/public.jsx b/assets/js/src/public.jsx
index 0f5876562f..9c68d03686 100644
--- a/assets/js/src/public.jsx
+++ b/assets/js/src/public.jsx
@@ -89,6 +89,7 @@ jQuery(($) => {
     if (animation !== '') {
       formDiv.addClass(`mailpoet_form_animation_${animation}`);
       formDiv.prev('.mailpoet_form_popup_overlay').addClass(`mailpoet_form_overlay_animation_${animation}`);
+      formDiv.prev('.mailpoet_form_popup_overlay').addClass(`mailpoet_form_overlay_animation`);
     }
     const background = form.data('background-color');
     formDiv.css('background-color', background || 'white');