out-com:imerimo
@keyframes glitch-a {
10%, 19%, 30%, 39%, 50%, 59%, 70%, 79%, 90%, 99%{
transform: translateX(calc( 0 * 100%));
text-shadow: 0em 0 0.02em lime, 0 0 0.02em #ff00e1;
clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 30%);
}
0%, 9% {
transform: translateX(calc( 0 * 100%));
text-shadow: 0em 0 0.02em lime, 0 0 0.02em #ff00e1;
clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
}
20%, 29% {
transform: translateX(calc( 0.005 * 100%));
text-shadow: -0.15em 0 0.02em lime, -0.3em 0 0.02em #ff00e1;
clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%);
}
40%, 49% {
transform: translateX(calc( 0.01 * 100%));
text-shadow: -0.3em 0 0.02em lime, -0.6em 0 0.02em #ff00e1;
clip-path: polygon(0 0.3%, 100% 0.3%, 100% 20.3%, 0 20.3%);
}
60% , 69%{
transform: translateX(calc( 0.03 * 100%));
text-shadow: -0.09em 0 0.02em lime, -0.18em 0 0.02em #ff00e1;
clip-path: polygon(0 40.6%, 100% 40.6%, 100% 65.6%, 0 65.6%);
}
80% , 89%{
transform: translateX(calc( 0.07 * 100%));
text-shadow: -0.21em 0 0.02em lime, -0.42em 0 0.02em #ff00e1;
clip-path: polygon(0 10.8%, 100% 10.8%, 100% 35.8%, 0 35.8%);
}
100% {
transform: translateX(calc( 0.083 * 100%));
text-shadow: -0.249em 0 0.02em lime, -0.498em 0 0.02em #ff00e1;
clip-path: polygon(0 0.1%, 100% 0.1%, 100% 30.1%, 0 30.1%);
}
}
@keyframes glitch-b {
10%, 19%, 30%, 39%, 50%, 59%, 70%, 79%, 90%, 99%{
transform: translateX(calc( 0 * 100%));
text-shadow: 0em 0 0.02em lime, 0em 0 0.02em #ff00e1;
clip-path:polygon(0 0%, 100% 0%, 100% 30%, 0 30%);
}
0%, 9% {
transform: translateX(calc( 0 * 100%));
text-shadow: 0em 0 0.02em lime, 0em 0 0.02em #ff00e1;
clip-path: polygon(0 30%, 100% 30%, 100% 55%, 0 55%);
}
20%, 29% {
transform: translateX(calc( 0.005 * 100%));
text-shadow: -0.015em 0 0.02em lime, -0.03em 0 0.02em #ff00e1;
clip-path:polygon(0 0%, 100% 0%, 100% 30%, 0 30%);
}
40%, 49% {
transform: translateX(calc( 0.01 * 100%));
text-shadow: -0.03em 0 0.02em lime, -0.06em 0 0.02em #ff00e1;
clip-path:polygon(0 70.3%, 100% 70.3%, 100% 90.3%, 0 90.3%);
}
60%, 69% {
transform: translateX(calc( 0.03 * 100%));
text-shadow: -0.09em 0 0.02em lime, -0.18em 0 0.02em #ff00e1;
clip-path:polygon(0 50.6%, 100% 50.6%, 100% 75.6%, 0 75.6%);
}
80%, 89%{
transform: translateX(calc( 0.07 * 100%));
text-shadow: -0.21em 0 0.02em lime, -0.42em 0 0.02em #ff00e1;
clip-path:polygon(0 0.8%, 100% 0.8%, 100% 25.8%, 0 25.8%);
}
100% {
transform: translateX(calc( 0.083 * 100%));
text-shadow: -0.249em 0 0.02em lime, -0.498em 0 0.02em #ff00e1;
clip-path:polygon(0 0.1%, 100% 0.1%, 100% 30.1%, 0 30.1%);
}
}