diff --git a/assets/css/src/components-public/_animation.scss b/assets/css/src/components-public/_animation.scss
new file mode 100644
index 0000000000..9ff67357c3
--- /dev/null
+++ b/assets/css/src/components-public/_animation.scss
@@ -0,0 +1,32 @@
+
+.mailpoet_form_animation_slideup {
+  animation: slide-up 1s 1 cubic-bezier(.77, 0, .175, 1);
+}
+
+.mailpoet_form_popup.mailpoet_form_animation_slideup {
+  animation: slide-up-popup 1s 1 cubic-bezier(.77, 0, .175, 1);
+}
+
+@keyframes slide-up-popup {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -20%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@keyframes slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(30%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/assets/css/src/components-public/_public.scss b/assets/css/src/components-public/_public.scss
index 4052f0c811..6af1eaa40d 100644
--- a/assets/css/src/components-public/_public.scss
+++ b/assets/css/src/components-public/_public.scss
@@ -310,42 +310,6 @@ div.mailpoet_form_slide_in {
   }
 }
 
-@keyframes fade-in-up {
-  0% {
-    opacity: 0;
-    transform: translateY(30%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-in-up-popup {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -20%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-@keyframes fade-in-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-30%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .mailpoet_form_position_left {
   left: 0;
 }
diff --git a/assets/css/src/mailpoet-public.scss b/assets/css/src/mailpoet-public.scss
index 758f4d3a3f..4188fd40a2 100644
--- a/assets/css/src/mailpoet-public.scss
+++ b/assets/css/src/mailpoet-public.scss
@@ -16,3 +16,4 @@
 
 @import 'components/parsley';
 @import 'components-public/public';
+@import 'components-public/animation';