archived-vdo.ninja/css/animations.css

/**
 * Created 06/05/2024
 * Imported in the main.css file.
 * 
 * This file contains all @keyframe aninmations and some "universal" classes for animations.
 *   Some styles in main.css also use these animations explicitly, and so not all the
 *   animations have "universal" classes associated with them.
 */

/* Shake animation */
.shake {
	animation: shake 0.5s;
	animation-iteration-count: once;
}
@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}


/* Spin animation */
@keyframes spin-animation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}


/* Flip 180 animations */
/* NOTE: At least used by the flip camera button in control-bar on mobile */
.flip {
	animation: flip180 2s;
	animation-iteration-count: 1;
}
@keyframes flip180 {
	0% {transform: rotate(0);}
	100% {transform: rotate(180deg);}
}

.flip2 {
	animation: flip1802 2s;
	animation-iteration-count: 1;
}
@keyframes flip1802 {
	0% {transform: rotate(180deg)}
	100% {transform: rotate(360deg);}
}


/* Blink-warn / Blink-alert animations */
/* NOTE: At least used by .battery */
@keyframes blink-warn {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes blink-alert {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}


/* Floating animation */
/* NOTE: At least used by .video-label */
@keyframes floating {
	0% { transform: translate(0, 0px); }
	50% { transform: translate(0, 15%); }
	100% { transform: translate(0, -0px); }
}


/* Pulsating animations */
/* NOTE: .pulsate is at least used by #mutetoggle */
.pulsate {
	box-shadow: 0 0 0 0 rgba(14, 19, 26, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(14, 19, 26, 0.7);
	}
	15% {
		transform: scale(1.2);
		box-shadow: 0 0 0 10px rgba(2, 3, 4, 0);
	}
	50% {
		transform: scale(1.0);
		box-shadow: 0 0 0 0 rgba(14, 19, 26, 0);
	}
	85% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(14, 19, 26, 0);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(14, 19, 26, 0);
	}
}
@keyframes pulsate {
	0%	{ box-shadow: 0 0 31px #244e1c44; transform: scale(1.0);}
	50%  { box-shadow: 0 0 17px #0004; transform: scale(0.99);}
	100% { box-shadow: 0 0 31px #244e1c44; transform: scale(1.0);}
}
@-webkit-keyframes pulsate {
	0%	{ box-shadow: 0 0 31px #244e1c44; transform: scale(1.0);}
	50%  { box-shadow: 0 0 17px #0004; transform: scale(0.99);}
	100% { box-shadow: 0 0 31px #244e1c44; transform: scale(1.0);}
}


/* Lightbox open animation */
/* NOTE: For opening lightboxes on homepage, and the "outlightbox" equivalent for closeing
   the lightboxes is found in lib.js */
@keyframes inlightbox {
	50% {
		width: 100%;
		left: 0;
		height: 200px;
	}

	100% {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
	}
}


/* Fade-in animation */
.fadein {
	animation: fadeIn var(--fadein-speed);
	-webkit-animation: fadeIn var(--fadein-speed);
	-moz-animation: fadeIn var(--fadein-speed);
	-o-animation: fadeIn var(--fadein-speed);
	-ms-animation: fadeIn var(--fadein-speed);
	animation-iteration-count: 1;
}
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
@-moz-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
@-o-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
@-ms-keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}


/* Fade-out animation */
.fadeout {
	animation: fadeout 1s;
	opacity: 0!important;
}
.partialFadeout{
	opacity: 0.2 !important;
}
@keyframes fadeout {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}


/* Greyout animation */
.greyout {
	animation: greyout 3s;
	opacity: 0.3!important;
}
@keyframes greyout {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0.3
	}
}