Add slide-up animation

[MAILPOET-3088]
This commit is contained in:
Pavel Dohnal
2020-09-10 09:02:36 +02:00
committed by Veljko V
parent 3efd413971
commit 23e732bde4
3 changed files with 33 additions and 36 deletions

View File

@ -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);
}
}

View File

@ -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;
}

View File

@ -16,3 +16,4 @@
@import 'components/parsley';
@import 'components-public/public';
@import 'components-public/animation';