75 lines
2.2 KiB
SCSS
75 lines
2.2 KiB
SCSS
/** glitch **/
|
|
$gap-horizontal: 10px;
|
|
|
|
header {
|
|
animation-name: glitch-anim-text;
|
|
animation-duration: 2s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
@keyframes glitch-anim-text {
|
|
0% {
|
|
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
|
|
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
|
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
|
|
}
|
|
2% {
|
|
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
|
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
|
}
|
|
4% {
|
|
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
|
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
|
}
|
|
5% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
|
}
|
|
6% {
|
|
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
|
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
|
}
|
|
7% {
|
|
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
}
|
|
8% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
}
|
|
9% {
|
|
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
|
}
|
|
9.9% {
|
|
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
|
|
}
|
|
10%, 46% {
|
|
transform: translate3d(0,0,0) scale3d(1,1,1);
|
|
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
|
|
|
|
47% {
|
|
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
|
}
|
|
48% {
|
|
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
|
}
|
|
49% {
|
|
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
|
|
}
|
|
|
|
|
|
50%, 100% {
|
|
transform: translate3d(0,0,0) scale3d(1,1,1);
|
|
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
}
|