Trying out a glitch animation


by Jeremy Caudle
code

I wanted to try to make a glitch animation using CSS animation. It didn't turn out looking too good and my approach probably isn't the best way to do it. I'll give it another shot some other day.

Page Not Found

View the code:

HTML and JS 
<section class="code-block" title="Page Not Found">
            <aside>This post contains animation that may be disorienting for some viewers. Please view with caution.</aside>
            <h1><span>Page Not Found</span></h1>
        </section>
CSS 
@keyframes jerkMotionX {
                0% {transform: translateX(0) translateY(-99.5%);}
                1% {transform: translateX(1%) translateY(-99.5%);}
                50% {transform: translateX(-1%) translateY(-99.5%);}
                100% {transform: translateX(0) translateY(-99.5%);}
            }

            @keyframes jerkMotionXTwo {
                0% {transform: translateX(0) translateY(99.5%);}
                1% {transform: translateX(1%) translateY(102.5%);}
                50% {transform: translateX(-1%) translateY(97.5%);}
                100% {transform: translateX(0) translateY(99.5%);}
            }

            @font-face {
        font-family: "ThaleahFat";
        src: url("https://jeremycaudle.com/retro-japanese-games/fonts/ThaleahFat.ttf") format("truetype");
        /* Font Thaleah Fat by Tiny Worlds - Available at https://tinyworlds.itch.io/free-pixel-font-thaleah */
        }

            .code-block {
                margin: auto;
                background-color: white;
                color: black;
                font-family: "ThaleahFat", monospace;
                z-index: 1;
            }

            .code-block h1 {
                font-size: 3rem;
                text-align: center;
                position: relative;
                margin:0;
            }

            .code-block h1 span {
                position: relative;
                z-index: 10;
            }

            .code-block h1::after {
                content: "Page Not Found";
                display: block;
                color: fuchsia;
                transform: translateY(-99.5%) translateX(.5%);
                z-index: 4;
                position: relative;
                margin: 0;
                animation-name: jerkMotionX;
                animation-timing-function: ease-in-out;
                animation-duration: .25s;
                animation-delay: 2.25s;
                animation-iteration-count: 1;
                animation-direction: alternate;
            }

            .code-block h1::before {
                content: "Page Not Found";
                display: block;
                color: cyan;
                transform: translateY(99.5%) translateX(-.5%);
                z-index: 3;
                position: relative;
                margin: 0;
                animation-name: jerkMotionXTwo;
                animation-timing-function: cubic-bezier(1,0,0,1);
                animation-duration: .125s;
                animation-iteration-count: 1;
                animation-delay: 1.75s;
                animation-direction: normal;
            }

            .code-block h1::before:hover {
                color: red;
            }

            .code-block aside {
                background-color: yellow;
                padding: 1rem;
                border: solid 2px rgb(199, 169, 0);
                margin-bottom: 75vh;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 18px;
                line-height: 1.5;
                font-weight: 300;
                color:rgb(199, 90, 0)
            }

            @supports (display: flex) {
                .code-block {
                    display: flex;
                    flex-flow: column;
                    align-content: center;
                    justify-content: center;
                }
            }

Tags