Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:Text Shuffle/styles.css: Difference between revisions

Template page
Content deleted Content added
MMONTAGEe (talk | contribs)
No edit summary
No edit summary
 
(7 intermediate revisions by 2 users not shown)
Line 2: Line 2:


.TextShuffler {
.TextShuffler {
position: relative;
font-size: 1.4em;
visibility: hidden;
color: #ffffff;
color: #ffffff;
display: flex;
margin-block: var(--space-md);
}
}


.TextShuffler .word {
.TextShuffler > div {
position: absolute;
opacity: 0;
visibility: visible;
animation: fadeCycle 56s linear infinite;
top: 0;
position: absolute;
font-size: var(--font-size-large);
transition: opacity 0.5s ease-in-out;
opacity: 0;
pointer-events: none;
animation: fadeCycle 56s linear infinite;
transition: opacity 0.7s ease-in-out;
text-shadow: 0 0 5px;
pointer-events: none;
}
}


.TextShuffler .word:nth-child(1) { animation-delay: 0s; }
.TextShuffler > :nth-child(1) { animation-delay: 0s; }
.TextShuffler .word:nth-child(2) { animation-delay: 8s; }
.TextShuffler > :nth-child(2) { animation-delay: 8s; }
.TextShuffler .word:nth-child(3) { animation-delay: 16s; }
.TextShuffler > :nth-child(3) { animation-delay: 16s; }
.TextShuffler .word:nth-child(4) { animation-delay: 24s; }
.TextShuffler > :nth-child(4) { animation-delay: 24s; }
.TextShuffler .word:nth-child(5) { animation-delay: 32s; }
.TextShuffler > :nth-child(5) { animation-delay: 32s; }
.TextShuffler .word:nth-child(6) { animation-delay: 40s; }
.TextShuffler > :nth-child(6) { animation-delay: 40s; }
.TextShuffler .word:nth-child(7) { animation-delay: 48s; }
.TextShuffler > :nth-child(7) { animation-delay: 48s; }


@keyframes fadeCycle {
@keyframes fadeCycle {
0% { opacity: 0; }
0% { opacity: 0; }
2% { opacity: 1; }
2% { opacity: 1; }
8% { opacity: 1; }
8% { opacity: 1; }
10% { opacity: 0; }
10% { opacity: 0; }
100% { opacity: 0; }
100% { opacity: 0; }
}
}

Latest revision as of 02:20, May 3, 2025

/* turned into slop atp */

.TextShuffler {
	position: relative;
	visibility: hidden;
	color: #ffffff;
	margin-block: var(--space-md);
}

.TextShuffler > div {
	position: absolute;
	visibility: visible;
	top: 0;
	font-size: var(--font-size-large);
	opacity: 0;
	animation: fadeCycle 56s linear infinite;
	transition: opacity 0.7s ease-in-out;
	text-shadow: 0 0 5px;
	pointer-events: none;
}

.TextShuffler > :nth-child(1) { animation-delay: 0s; }
.TextShuffler > :nth-child(2) { animation-delay: 8s; }
.TextShuffler > :nth-child(3) { animation-delay: 16s; }
.TextShuffler > :nth-child(4) { animation-delay: 24s; }
.TextShuffler > :nth-child(5) { animation-delay: 32s; }
.TextShuffler > :nth-child(6) { animation-delay: 40s; }
.TextShuffler > :nth-child(7) { animation-delay: 48s; }

@keyframes fadeCycle {
	0%   { opacity: 0; }
	2%   { opacity: 1; }
	8%   { opacity: 1; }
	10%  { opacity: 0; }
	100% { opacity: 0; }
}