Template:TextAnimations/styles.css - Revision history

DB at 20:31, 17 March 2026

2026-03-17T20:31:57Z

← Older revision		Revision as of 22:31, 17 March 2026
Line 14:		Line 14:
	0%, 100% {		0%, 100% {
	opacity: 0.3;		opacity: 0.3;
	filter: brightness(0.7);		filter: brightness(0.8);
	}		}
	50% {		50% {
Line 60:		Line 60:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.text-animation-container.pulse {		.text-animation-container.pulse {
	animation: linear-pulse 4s linear infinite !important;		animation: linear-pulse 3s linear infinite !important;
	display: inline-block !important;		display: inline-block !important;
	}		}

DB at 20:29, 17 March 2026

2026-03-17T20:29:09Z

← Older revision		Revision as of 22:29, 17 March 2026
Line 10:		Line 10:
	}		}

	/* ~~Global Heartbeat~~ - ~~Fades the entire span simultaneously~~ */		/* Linear Pulse - Ramps up and down evenly */
	@keyframes ~~global~~-~~heartbeat~~ {		@keyframes linear-pulse {
	0%, 100% { opacity: 0.7; filter: brightness(0.9); ~~transform: scale(1); }~~		0%, 100% {
	~~10% { opacity: 1; filter: brightness(1.2); transform: scale(1.02);~~ }		opacity: 0.3;
	20% { opacity: ~~0.8; filter: brightness(~~1); ~~transform: scale(1); }~~		filter: brightness(0.7);
	~~30% { opacity: 1;~~ filter: brightness(1.3); ~~transform: scale(1.04); }~~		}
	~~45% { opacity: 0.7; filter: brightness(0.9); transform: scale(1);~~ }		50% {
			opacity: 1;
			filter: brightness(1.2);
			}
	}		}

Line 56:		Line 59:
	.wavy span { animation: wave 2.5s ease-in-out infinite !important; }		.wavy span { animation: wave 2.5s ease-in-out infinite !important; }
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.pulse ~~span~~ {		.text-animation-container.pulse {
	animation: ~~global~~-~~heartbeat 3s ease-in-out~~ infinite !important;		animation: linear-pulse 4s linear infinite !important;
	display: inline-block !important;		display: inline-block !important;
	}		}

DB at 20:23, 17 March 2026

2026-03-17T20:23:03Z

← Older revision		Revision as of 22:23, 17 March 2026
Line 10:		Line 10:
	}		}

	/* Heartbeat ~~Pulse~~ - ~~Focuses on brightness and subtle scale~~ */		/* Global Heartbeat - Fades the entire span simultaneously */
	@keyframes heartbeat {		@keyframes global-heartbeat {
	0%, 100% { filter: brightness(1); transform: scale(1); }		0%, 100% { opacity: 0.7; filter: brightness(0.9); transform: scale(1); }
	10% { filter: brightness(1.3); transform: scale(1.05); }		10% { opacity: 1; filter: brightness(1.2); transform: scale(1.02); }
	20% { filter: brightness(1.1); transform: scale(1~~.02~~); }		20% { opacity: 0.8; filter: brightness(1); transform: scale(1); }
	30% { filter: brightness(1.4); transform: scale(1.1); }		30% { opacity: 1; filter: brightness(1.3); transform: scale(1.04); }
	45% { filter: brightness(1); transform: scale(1); }		45% { opacity: 0.7; filter: brightness(0.9); transform: scale(1); }
	}		}

Line 57:		Line 57:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.pulse span {		.pulse span {
	~~/* 2.5s duration for a slow-ish heartbeat */~~		animation: global-heartbeat 3s ease-in-out infinite !important;
	animation: heartbeat ~~2.5s~~ ease-in-out infinite !important;
	display: inline-block !important;		display: inline-block !important;
	}		}

DB at 20:14, 17 March 2026

2026-03-17T20:14:12Z

@@ Line 8: / Line 8: @@
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
+}
@@ Line 47: / Line 56: @@
 .wavy span    { animation: wave 2.5s ease-in-out infinite !important; }
 .rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
 .jolt span {
    display: inline-block !important;

DB at 20:04, 17 March 2026

2026-03-17T20:04:47Z

← Older revision		Revision as of 22:04, 17 March 2026
Line 10:		Line 10:
	}		}

	@keyframes jolt-~~tremble~~ {		/* Three distinct "shiver" paths to ensure variety */
	0% { transform: translate(0, 0); }		@keyframes jolt-a {
	25% { transform: translate(-0.3px, -~~0.8px); }~~		0%, 100% { transform: translate(0, 0); }
	~~50% { transform: translate(0.3px,~~ 0.5px); }		25% { transform: translate(-0.3px, -0.5px); }
	75% { transform: translate(-0.2px, 0.~~8px); }~~		75% { transform: translate(0.2px, 0.4px); }
	~~100% { transform: translate(0, 0~~); }
	}		}
			@keyframes jolt-b {
			0%, 100% { transform: translate(0, 0); }
			25% { transform: translate(0.3px, 0.5px); }
			75% { transform: translate(-0.2px, -0.4px); }
			}
			@keyframes jolt-c {
			0%, 100% { transform: translate(0, 0); }
			25% { transform: translate(-0.2px, 0.5px); }
			75% { transform: translate(0.3px, -0.5px); }
			}

			/* Helper classes assigned by JS */
			.jolt-v1 { animation: jolt-a 0.35s linear infinite !important; }
			.jolt-v2 { animation: jolt-b 0.35s linear infinite !important; }
			.jolt-v3 { animation: jolt-c 0.35s linear infinite !important; }

	/* 2. Container & Spans - Vital for MediaWiki */		/* 2. Container & Spans - Vital for MediaWiki */
Line 34:		Line 48:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.jolt span {		.jolt span {
	~~/* Slowed to 0.3s for a "shiver" feel. Travel is under 1px to remain subtle */~~
	~~animation: jolt-tremble 0.3s linear infinite !important;~~
	display: inline-block !important;		display: inline-block !important;
	~~/* Prevents slight layout shifts in the container */~~		margin: 0 0.1px !important;
	margin: 0 0.1px !important;
	}		}

DB at 18:29, 17 March 2026

2026-03-17T18:29:35Z

← Older revision		Revision as of 20:29, 17 March 2026
Line 10:		Line 10:
	}		}

	@keyframes jolt-~~buzz~~ {		@keyframes jolt-tremble {
	0%, ~~100~~% { transform: ~~translateY~~(0); }		0% { transform: translate(0, 0); }
	25% { transform: ~~translateY~~(-1.5px); }		25% { transform: translate(-0.3px, -0.8px); }
	75% { transform: ~~translateY~~(1.~~5px~~); }		50% { transform: translate(0.3px, 0.5px); }
			75% { transform: translate(-0.2px, 0.8px); }
			100% { transform: translate(0, 0); }
	}		}

Line 32:		Line 34:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.jolt span {		.jolt span {
	/* ~~High speed (~~0.~~2s) creates the~~ "~~electric~~" ~~vibration~~ feel */		/* Slowed to 0.3s for a "shiver" feel. Travel is under 1px to remain subtle */
	animation: jolt-~~buzz~~ 0.2s linear infinite !important;		animation: jolt-tremble 0.3s linear infinite !important;
	display: inline-block !important;		display: inline-block !important;
	/* ~~Ensure no horizontal shifting occurs~~ */		/* Prevents slight layout shifts in the container */
	margin: 0 ~~!important;~~		margin: 0 0.1px !important;
	~~padding:~~ 0 !important;
	}		}

DB at 18:25, 17 March 2026

2026-03-17T18:25:07Z

← Older revision		Revision as of 20:25, 17 March 2026
Line 10:		Line 10:
	}		}

	@keyframes jolt-~~shake~~ {		@keyframes jolt-buzz {
	0% ~~{ transform: translate(0~~, ~~0); }~~		0%, 100% { transform: translateY(0); }
	20% { transform: ~~translate~~(-0~~.5px, 1px~~); }		25% { transform: translateY(-1.5px); }
	40% { transform: ~~translate~~(-0.5px~~, -1px~~); }		75% { transform: translateY(1.5px); }
	60% { transform: ~~translate~~(0.5px~~, 1px); }~~
	~~80% { transform: translate(0.5px, -1px); }~~
	~~100% { transform: translate(0, 0~~); }
	}		}

	/* 2. Container & Spans - Vital for MediaWiki */		/* 2. Container & Spans - Vital for MediaWiki */
	.text-animation-container {		.text-animation-container {
	display: inline !important;		display: inline-block !important;
	white-space: pre~~-wrap~~ !important; ~~/* Preserves spaces */~~		white-space: pre !important;
	}		}

Line 35:		Line 32:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.jolt span {		.jolt span {
	animation: jolt-~~shake~~ 0.8s linear infinite !important;		/* High speed (0.2s) creates the "electric" vibration feel */
			animation: jolt-buzz 0.2s linear infinite !important;
	display: inline-block !important;		display: inline-block !important;
			/* Ensure no horizontal shifting occurs */
			margin: 0 !important;
			padding: 0 !important;
	}		}

DB at 17:29, 17 March 2026

2026-03-17T17:29:51Z

← Older revision		Revision as of 19:29, 17 March 2026
Line 35:		Line 35:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.jolt span {		.jolt span {
	animation: jolt-shake 0.6s linear infinite !important;		animation: jolt-shake 0.8s linear infinite !important;
	display: inline-block !important;		display: inline-block !important;
	}		}

DB at 17:25, 17 March 2026

2026-03-17T17:25:07Z

← Older revision		Revision as of 19:25, 17 March 2026
Line 12:		Line 12:
	@keyframes jolt-shake {		@keyframes jolt-shake {
	0% { transform: translate(0, 0); }		0% { transform: translate(0, 0); }
	20% { transform: translate(-~~2px~~, 1px); }		20% { transform: translate(-0.5px, 1px); }
	40% { transform: translate(-~~2px~~, -1px); }		40% { transform: translate(-0.5px, -1px); }
	60% { transform: translate(~~2px~~, 1px); }		60% { transform: translate(0.5px, 1px); }
	80% { transform: translate(~~2px~~, -1px); }		80% { transform: translate(0.5px, -1px); }
	100% { transform: translate(0, 0); }		100% { transform: translate(0, 0); }
	}		}
Line 35:		Line 35:
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.jolt span {		.jolt span {
	animation: jolt-shake 0.4s linear infinite !important;		animation: jolt-shake 0.6s linear infinite !important;
	display: inline-block !important;		display: inline-block !important;
	}		}

DB at 17:17, 17 March 2026

2026-03-17T17:17:50Z

← Older revision		Revision as of 19:17, 17 March 2026
Line 11:		Line 11:

	@keyframes jolt-shake {		@keyframes jolt-shake {
	0% { transform: translate(0,0); }		0% { transform: translate(0, 0); }
	25% { transform: translate(1px, -1px); }		20% { transform: translate(-2px, 1px); }
	50% { transform: translate(~~-1px~~, 1px); }		40% { transform: translate(-2px, -1px); }
	75% { transform: translate(~~1px~~, 1px); }		60% { transform: translate(2px, 1px); }
	100% { transform: translate(0,0); }		80% { transform: translate(2px, -1px); }
			100% { transform: translate(0, 0); }
	}		}

Line 33:		Line 34:
	.wavy span { animation: wave 2.5s ease-in-out infinite !important; }		.wavy span { animation: wave 2.5s ease-in-out infinite !important; }
	.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }		.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
	.jolt span { animation: jolt-shake 0.~~15s~~ linear infinite !important; }		.jolt span {
			animation: jolt-shake 0.4s linear infinite !important;
			display: inline-block !important;
			}

	/* Combined Effects */		/* Combined Effects */