snappymail/dev/Styles/Animations.less

.rl-strip-animation(@rgba, @stripOpacity) {
	background-image: linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%,
		transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%,
		transparent 75%, transparent);
}

@keyframes highlight-folder-row {
	0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
}

@keyframes textLoadingAnimationKeyFrame {
	0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; }
}

@keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper {
	transform: translateY(-30px);
}

html.rl-started-trigger.no-mobile #rl-content {
	opacity: 0.7;
}

#rl-loading {
	.transition(opacity 0.5s linear);
}

.rl-anim {

	&.csstransitions.no-mobile {

		#rl-left {
			.transition(width 0.3s ease-out);
		}

		#rl-right {
			.transition(left 0.3s ease-out);
		}
		
		#rl-sub-left, #rl-sub-left .messageList .inputSearch {
			.transition(width 0.3s ease-out);
		}
		
		#rl-sub-right {
			.transition(left 0.3s ease-out);
		}
	}

	&.csstransitions.no-mobile #rl-content {
		.transition(opacity 0.3s ease-out);
	}
	
	&.csstransitions.no-mobile .b-login-content .loginFormWrapper {
		.transition(all 0.3s ease-out);
	}

	&.rgba.cssanimations.backgroundsize .e-strip-animation {
		background-size: 60px 60px;
		.rl-strip-animation(0, 0.1);
		animation: animate-stripes 2s linear infinite;
	}

	&.csstransitions .button-delete-transitions {
		.transition(all 0.2s linear);
	}

	&.cssanimations .b-folders .e-item .anim-action-class {
		animation: highlight-folder-row 0.5s linear;
	}

	&.csstransitions .b-folders .btn.buttonContacts {
		.transition(margin 0.3s linear);
	}

	&.csstransitions .b-folders .b-content.opacity-on-panel-disabled {
		.transition(opacity 0.3s linear);
	}

	&.csstransitions .messageList {
		.messageListItem {
			.transition(max-height 400ms ease);
		}
		.listDragOver {
			.transition(all 400ms ease);
		}
	}

	&.csstransitions .b-list-content {
		.e-contact-item {
			.transition(max-height 400ms ease);
		}
	}

	&.csstransitions .modal.b-domain-content {
		.modal-body {
			.transition(left 500ms ease);
		}
	}

	&.csstransitions .modal.fade {
		
		.transition(all 0.2s ease-out);
		transform: translateY(-20px);

		&.in {
			transform: none;
		}
	}

	&.cssanimations .b-compose.loading .b-header-toolbar {
		background-size: 60px 60px;
		.rl-strip-animation(255, 0.2);
		animation: animate-stripes 2s linear infinite;
	}
}

.textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 {
	animation: textLoadingAnimationKeyFrame 1s linear infinite 0s;
}

.textLoadingAnimationD2 {
	animation-delay: 0.3s;
}

.textLoadingAnimationD3 {
	animation-delay: 0.6s;
}