snappymail/dev/Styles/AnimationsUser.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 {
	.e-strip-animation {
		background-size: 60px 60px;
		.rl-strip-animation(0, 0.1);
		animation: animate-stripes 2s linear infinite;
	}
}

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

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

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

	.b-folders .btn.buttonContacts {
		transition: margin 0.3s linear;
	}

	.b-folders .b-content.opacity-on-panel-disabled {
		transition: opacity 0.3s linear;
	}

	.messageList {
		.messageListItem {
			transition: max-height 400ms ease;
		}
		.listDragOver {
			transition: all 400ms ease;
		}
	}

	.b-list-content {
		.e-contact-item {
			transition: max-height 400ms ease;
		}
	}

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