*,
*::after,
*::before {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


.glitch {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    /*height: 100vh;*/

    overflow: hidden;

}


.glitch-img {

    position: absolute;

    top: calc(-1 * 5px);

    left: calc(-1 * 10px);

    width: calc(100% + 10px * 2);

    height: calc(100% + 5px * 2);

    background: url(https://www.pts.org.tw/message/note.html) no-repeat 85% top;



    background-color: transparent;

    background-size: cover;

    /*transform: translate3d(0, 0, 0);

    background-blend-mode: none;*/



}


.glitch-img:nth-child(n+2) {

    opacity:0;

}


.glitch .glitch-img:nth-child(n+2) {

    animation-duration: 2s;

    animation-delay: 0s;

    animation-timing-function: /*linear*/ease-out;
  
 animation-iteration-count: 7;
    animation-direction: alternate;
 
}


.glitch .glitch-img:nth-child(2) {

    background-color: transparent;

    background-blend-mode: none;

    animation-name: glitch-anim-1;

}


.glitch .glitch-img:nth-child(3) {

    background-color: transparent;

    background-blend-mode: none;

    animation-name: glitch-anim-2;

}


.glitch .glitch-img:nth-child(4) {

    background-color: transparent;

    background-blend-mode: none;

    animation-name: glitch-anim-3;

}


/* Animations */


@keyframes glitch-anim-1 {

    0% {

        opacity: 1;

        transform: translate3d(50px, 0px, 0px);

        -webkit-clip-path: polygon(90% 0, 100% 0, 100% 100%, 90% 100%);

        clip-path: polygon(290% 0, 100% 0, 100% 100%, 90% 100%);

    }

    9% {

        -webkit-clip-path: polygon(75% 0, 90% 0, 90% 100%, 75% 100%);

        clip-path: polygon(75% 0, 90% 0, 90% 100%, 75% 100%);

    }

    18% {

        -webkit-clip-path: polygon(60% 0, 80% 0, 80% 100%, 60% 100%);

        clip-path: polygon(60% 0, 80% 0, 80% 100%, 60% 100%);

    }

    27% {

        -webkit-clip-path: polygon(45% 0, 70% 0, 70% 100%, 45% 100%);

        clip-path: polygon(45% 0, 70% 0, 70% 100%, 45% 100%);

    }

    36% {

        -webkit-clip-path: polygon(30% 0, 60% 0, 60% 100%, 30% 100%);

        clip-path: polygon(30% 0, 60% 0, 60% 100%, 30% 100%);

    }

    45% {

        -webkit-clip-path: polygon(15% 0, 50% 0,50% 100%, 15% 100%);

        clip-path: polygon(15% 0, 50% 0, 50% 100%, 15% 100%;

    }

    54% {

        -webkit-clip-path: polygon(0% 0, 40% 0, 40% 100%, 0% 100%);

        clip-path: polygon(0% 0, 40% 0, 40% 100%, 0% 100%);

    }

    63% {

        -webkit-clip-path: polygon(20% 0, 30% 0, 30% 100%, 20% 100%);

        clip-path: polygon(20% 0, 30% 0, 30% 100%, 20% 100%);

    }

    72% {

        -webkit-clip-path: polygon(40% 0, 20% 0, 20% 100%, 40% 100%);

        clip-path: polygon(40% 0, 20% 0, 20% 100%, 40% 100%);

    }

    81% {

        -webkit-clip-path: polygon(60% 0, 10% 0, 10% 100%, 60% 100%);

        clip-path: polygon(60% 0, 10% 0, 10% 100%, 60% 100%);

    }

    90%  {

        -webkit-clip-path: polygon(80% 0, 0% 0, 0% 100%, 80% 100%);

        clip-path: polygon(80% 0, 0% 0, 0% 100%, 80% 100%);

    }

    92.9% {

        opacity: 1;

        transform: translate3d(10px, 0, 0);

    }



      100% {

        opacity: 0;

        transform: translate3d(0, 0, 0);

        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);

        clip-path: polygon(0 0, 0 0, 0 0, 0 0);

    }

}