?? GreyFile — Mystic File Browser

Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/


?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css

?? Viewing: _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 {
	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 {
	
	> 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;
		}
	}
}

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

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

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

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

.touch .edgtf-no-animation-on-touch .edgtf-flip-in,
.touch .edgtf-no-animation-on-touch .edgtf-grow-in,
.touch .edgtf-no-animation-on-touch .edgtf-z-rotate,
.touch .edgtf-no-animation-on-touch .edgtf-x-rotate,
.touch .edgtf-no-animation-on-touch .edgtf-y-translate,
.touch .edgtf-no-animation-on-touch .edgtf-fade-in-down,
.touch .edgtf-no-animation-on-touch .edgtf-fade-in-left-x-rotate,
.touch .edgtf-no-animation-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
   ========================================================================== */

??

??