Animations

/* Vars */
$main:        #e57373;
$dark:        #09a5be;

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadeIn {
	animation-name: fadeIn;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.fadeOut {
	animation-name: fadeOut;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.7);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.zoomIn {
	animation-name: zoomIn;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes showDialog {
	0% {
		opacity: 0;
		transform: translateY(4rem);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.showDialog {
	animation-name: showDialog;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-100%)
	}
	100% {
		opacity: 1;
		transform: translateY(0)
	}
}

.slideDown {
	animation-name: slideDown;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes jump {
	0% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(0, 0);
	}
	40% {
		transform: translate(0, 1.5rem);
	}
	50% {
		transform: translate(0, 0);
	}
	60% {
		transform: translate(0, 0);
	}
	80% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(0, 0);
	}
}

.jump {
	animation-name: jump;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes scale {
	0% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1.2);
	}
}

.scale {
	animation-name: scale;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes scaleShake {
	0% {
		transform: scale(.8)
	}
	80% {
		transform: rotate(-15deg)
	}
	90% {
		transform: rotate(15deg)
	}
	100% {
		transform: scale(1.2)
	}
}

.scaleShake {
	animation-name: scaleShake;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes shake {
	0% {
		transform: rotate(0deg);
	}
	88% {
		transform: rotate(0deg);
	}
	92% {
		transform: rotate(5deg);
	}
	96% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.shake {
	animation-name: shake;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes colorChange {
	0% {
		color: $dark;
	}
	100% {
		color: $main;
	}
	
}

.colorChange {
	animation-name: colorChange;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}