Add slide-up animation
[MAILPOET-3088]
This commit is contained in:
32
assets/css/src/components-public/_animation.scss
Normal file
32
assets/css/src/components-public/_animation.scss
Normal 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);
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -16,3 +16,4 @@
|
||||
|
||||
@import 'components/parsley';
|
||||
@import 'components-public/public';
|
||||
@import 'components-public/animation';
|
||||
|
Reference in New Issue
Block a user