snappymail/dev/Styles/Animations.less

@keyframes login-form-shake  {
  0% {transform: translateX(0);}
  12.5% {transform: translateX(-6px) rotateY(-5deg)}
  37.5% {transform: translateX(5px) rotateY(4deg)}
  62.5% {transform: translateX(-3px) rotateY(-2deg)}
  87.5% {transform: translateX(2px) rotateY(1deg)}
  100% {transform: translateX(0)}
}

html.rl-started-delay {

	#rl-left {
		transition: width 0.3s ease-out;
	}

	#rl-right {
		transition: left 0.3s ease-out, right 0.3s ease-out;
	}

	#rl-sub-right {
		transition: left 0.3s ease-out;
	}
}

@media screen and (min-width: 1000px) {

	html.rl-started-trigger .b-login-content .loginFormWrapper {
		/*transform: scale(1.1);*/
		transform: translateY(-20px);
		opacity: 0.5;
	}

	.b-login-content .errorAnimated {
		animation: login-form-shake 400ms ease-in-out;
	}

	.b-login-content .errorAnimated .buttonLogin {
		color: #b94a48;
		font-weight: bold;
	}

	.b-login-content .afterLoginHide {
		opacity: 0;
	}

	.b-login-content .loginFormWrapper {
		transition: all 0.3s ease-out;
	}

	.button-delete-transitions {
		transition: all 0.2s linear;
	}

	#rl-popups > .rl-view-model .modal {
		transition: all .2s ease-out;
	}
	#rl-popups > .rl-view-model:not(.show) .modal {
		top: -25%;
	}
	#rl-popups > .rl-view-model .modal.fade {
		opacity: 1;
	}
	#rl-popups > .rl-view-model:not(.show) .modal.fade {
		opacity: 0;
	}
}

#rl-popups > .rl-view-model {
	transition: background-color 0.2s linear;
}
#rl-popups > .rl-view-model:not(.show) {
	background-color: rgba(0,0,0,0);
}