css故障闪动

本例实现加载中故障闪动特效
html部分：

<div data-glitch="Loading..." class="glitch">Loading...</div>

css部分：

        body{
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #111;
            min-height: 100vh;
        }
        .glitch{
            color: #fff;
            position: relative;
            font-size: 40px;
            font-weight: 700;
            letter-spacing: 5px;
            font-family:  Helvetica, sans-serif;
            animation: skewX 1s ease-in-out infinite;
        }
        .glitch::before,
        .glitch::after{
            display: block;
            content: attr(data-glitch);
            position: absolute;
            top: 0;
            left: 0;
            opacity: .8;
            
        }
        .glitch::before{
            color: #8b00ff;
            animation: glitch 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both infinite;
            z-index: -1;
        }
        .glitch::after{
            animation: glitch 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both infinite;
            color: #00e571;
            z-index: -2;
        }
        @keyframes skewX{
            0%,40%,44%,58%,61%,65%,69%,73%,100%{
                transform: skewX(0deg);
            }
            41%{
                transform: skewX(10deg);
            }
            42%{
                transform: skewX(-10deg);
            }
            59%{
                transform: skewX(40deg) skewY(10deg);
            }
            60%{
                transform: skewX(-40deg) skewY(-10deg);
            }
            63%{
                transform: skewX(10deg) skewY(-5deg);
            }
            70%{
                transform: skewX(-50deg) skewY(-20deg);
            }
            71%{
                transform: skewX(10deg) skewY(-10deg);
            }
        }

        @keyframes glitch{
            0%{
                transform: translate(0);
            }
            20%{
                transform: translate(-3px,3px);
            }
            40%{
                transform: translate(-3px,-3px);
            }
            60%{
                transform: translate(3px,3px);
            }
            80%{
                transform: translate(3px,-3px);
            }
            to{
                transform: translate(0);
            }
        }

最终效果如图：