File: /var/www/html/wpmuhibbah_err/wp-content/themes/goodwish/assets/css/scss/_animations.scss
/* ==========================================================================
#Animation styles - start
========================================================================== */
@include keyframes(element-from-left) {
0% {
opacity: 0;
transform: translate(-20%, 0);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@include keyframes(element-from-right) {
0% {
opacity: 0;
transform: translate(20%, 0);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@include keyframes(element-from-top) {
0% {
opacity: 0;
transform: translate(0, -30%);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@include keyframes(element-from-bottom) {
0% {
opacity: 0;
transform: translate(0, 30%);
}
100% {
opacity: 1;
transform: translate(0, 30%);
}
}
.edgtf-element-from-left,
.edgtf-element-from-right,
.edgtf-element-from-top,
.edgtf-element-from-bottom,
.edgtf-element-from-fade,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-left,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-right,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-top,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-bottom,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-fade {
display: inline-block;
width: 100%;
}
.touch .edgtf-no-animations-on-touch .edgtf-element-from-left,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-right,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-top,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-bottom,
.touch .edgtf-no-animations-on-touch .edgtf-element-from-fade {
> div {
opacity: 1;
@include edgtfAnimation(none);
@include edgtfTransform(scale(1));
}
}
.edgtf-element-from-left,
.edgtf-element-from-right,
.edgtf-element-from-top,
.edgtf-element-from-bottom,
.edgtf-element-from-fade,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-left > .elementor-container,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-right > .elementor-container,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-top > .elementor-container,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-bottom > .elementor-container,
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-fade > .elementor-container {
> div {
opacity: 0;
display: inline-block;
width: 100%;
vertical-align: middle;
}
}
.edgtf-element-from-fade {
&.edgtf-element-from-fade-on {
> div {
opacity: 1;
@include edgtfTransition(opacity .8s ease 0s);
-webkit-backface-visibility: hidden;
}
}
}
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-fade {
&.edgtf-element-from-fade-on {
> .elementor-container > div {
opacity: 1;
@include edgtfTransition(opacity .8s ease 0s);
-webkit-backface-visibility: hidden;
}
}
}
.edgtf-element-from-left {
&.edgtf-element-from-left-on {
> div {
@include edgtfAnimation(element-from-left 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-left {
&.edgtf-element-from-left-on {
> .elementor-container > div {
@include edgtfAnimation(element-from-left 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.edgtf-element-from-right {
&.edgtf-element-from-right-on {
> div {
@include edgtfAnimation(element-from-right 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-right {
&.edgtf-element-from-right-on {
> .elementor-container > div {
@include edgtfAnimation(element-from-right 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.edgtf-element-from-top {
&.edgtf-element-from-top-on {
> div {
@include edgtfAnimation(element-from-top 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-top {
&.edgtf-element-from-top-on {
> .elementor-container > div {
@include edgtfAnimation(element-from-top 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.edgtf-element-from-bottom {
&.edgtf-element-from-bottom-on {
> div {
@include edgtfAnimation(element-from-bottom 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.elementor-editor-active .edgtf-elementor-admin-edgtf-element-from-bottom {
&.edgtf-element-from-bottom-on {
> .elementor-container > div {
@include edgtfAnimation(element-from-bottom 0.7s 1 ease-in-out);
opacity: 1;
-webkit-backface-visibility: hidden;
}
}
}
.touch .edgtf-no-animations-on-touch .edgtf-flip-in,
.touch .edgtf-no-animations-on-touch .edgtf-grow-in,
.touch .edgtf-no-animations-on-touch .edgtf-z-rotate,
.touch .edgtf-no-animations-on-touch .edgtf-x-rotate,
.touch .edgtf-no-animations-on-touch .edgtf-y-translate,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in-down,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in-left-x-rotate,
.touch .edgtf-no-animations-on-touch .edgtf-fade-in{
@include edgtfTransition(none !important);
@include edgtfTransform(none !important);
opacity: 1 !important;
}
.edgtf-flip-in {
opacity: 0;
@include edgtfTransform(perspective(1000px) rotateY(25deg));
@include edgtfTransition(all 1.1s ease-in-out);
&.edgtf-flip-in-on {
opacity: 1;
@include edgtfTransform(rotateY(0deg));
}
}
.edgtf-grow-in {
opacity: 0;
@include edgtfTransform(scale(0.8));
@include edgtfTransition(all 1s cubic-bezier(0,1,.5,1));
-webkit-backface-visibility: hidden;
&.edgtf-grow-in-on {
opacity: 1;
@include edgtfTransform(scale(1));
}
}
.edgtf-z-rotate {
opacity: 0;
@include edgtfTransform(rotateZ(7deg));
@include edgtfTransition(all 300ms cubic-bezier(0.165, 0.84, 0.44, 1));
@include edgtfTransformOrigin(top right);
-webkit-backface-visibility: hidden;
&.edgtf-z-rotate-on {
opacity: 1;
@include edgtfTransform(rotateZ(0deg));
}
}
.edgtf-x-rotate {
opacity: 0;
@include edgtfTransform(perspective(900px) rotateX(-45deg));
@include edgtfTransition(all .6s cubic-bezier(.785,.135,.15,.86));
-webkit-backface-visibility: hidden;
&.edgtf-x-rotate-on {
opacity: 1;
@include edgtfTransform(rotateX(0deg));
}
}
.edgtf-y-translate {
opacity: 0;
@include edgtfTransform(translate(0,30px));
@include edgtfTransition(all 700ms cubic-bezier(0.680, -0.650, 0.265, 1.650));
&.edgtf-y-translate-on {
opacity: 1;
@include edgtfTransform(translate(0,0));
}
}
.edgtf-fade-in-down {
opacity: 0;
@include edgtfTransform(translate(0,-25px));
@include edgtfTransition(all .9s cubic-bezier(0,1,.5,1));
&.edgtf-fade-in-down-on {
opacity: 1;
@include edgtfTransform(translate(0,0));
}
}
.edgtf-fade-in-left-x-rotate {
opacity: 0;
@include edgtfTransform(rotateZ(-5deg) translate(-30px,0));
@include edgtfTransition(all .4s ease);
&edgtf-fade-in-left-x-rotate-on {
opacity: 1;
@include edgtfTransform(rotateZ(0deg) translate(0,0));
}
}
.edgtf-fade-in {
opacity: 0;
@include edgtfTransition(all 1s ease);
&.edgtf-fade-in-on {
opacity: 1;
}
}
/* ==========================================================================
#Animation styles - end
========================================================================== */