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

Template:Glitch Text Effect/styles.css: Difference between revisions

Template page
Content deleted Content added
No edit summary
No edit summary
Line 1: Line 1:
.glitch-effect {
.glitch-effect {
position: relative;
position: relative;
animation-duration: 4s;
animation-duration: 2.5s;
animation-name: glitch;
animation-name: glitch;
animation-iteration-count: infinite;
animation-iteration-count: infinite;
Line 10: Line 10:
@keyframes glitch {
@keyframes glitch {
from {
from {
top: -6px;
top: 0;
left: -6px;
left: 0;
}
}


25% {
25% {
top: -6px;
top: -4px;
left: 0;
left: 4px;
}
}


50% {
50% {
top: 0;
top: 4px;
left: 6px;
left: -4px;
}
}


75% {
to {
top: 0;
top: 0;
left: -6px;
left: 0;
}

to {
top: 6px;
left: 6px;
}
}
}
}

Revision as of 08:00, March 8, 2025

.glitch-effect {
	position: relative;
	animation-duration: 2.5s;
	animation-name: glitch;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes glitch {
	from {
		top: 0;
		left: 0;
	}

	25% {
		top: -4px;
		left: 4px;
	}

	50% {
		top: 4px;
		left: -4px;
	}

	to {
		top: 0;
		left: 0;
	}
}