Template:Glitch Text Effect/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
Tesinormed (talk | contribs) No edit summary |
Tesinormed (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
.glitch-effect { |
.glitch-effect { |
||
position: relative; |
position: relative; |
||
animation-duration: |
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: |
top: 0; |
||
left: |
left: 0; |
||
} |
} |
||
25% { |
25% { |
||
top: - |
top: -4px; |
||
left: |
left: 4px; |
||
} |
} |
||
50% { |
50% { |
||
top: |
top: 4px; |
||
left: |
left: -4px; |
||
} |
} |
||
to { |
|||
top: 0; |
top: 0; |
||
left: |
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;
}
}