aresnick/safari-anim-test.html

## safari-anim-test.html
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
    @-webkit-keyframes noise-anim {
        0% {
            clip: rect(21px, 9999px, 64px, 0);
        }

        5% {
            clip: rect(90px, 9999px, 91px, 0);
        }

        10% {
            clip: rect(7px, 9999px, 21px, 0);
        }

        15% {
            clip: rect(78px, 9999px, 67px, 0);
        }

        20% {
            clip: rect(66px, 9999px, 51px, 0);
        }

        25% {
            clip: rect(21px, 9999px, 2px, 0);
        }

        30% {
            clip: rect(24px, 9999px, 36px, 0);
        }

        35% {
            clip: rect(9px, 9999px, 73px, 0);
        }

        40% {
            clip: rect(37px, 9999px, 78px, 0);
        }

        45% {
            clip: rect(16px, 9999px, 49px, 0);
        }

        50% {
            clip: rect(59px, 9999px, 31px, 0);
        }

        55% {
            clip: rect(45px, 9999px, 7px, 0);
        }

        60% {
            clip: rect(49px, 9999px, 75px, 0);
        }

        65% {
            clip: rect(56px, 9999px, 46px, 0);
        }

        70% {
            clip: rect(94px, 9999px, 24px, 0);
        }

        75% {
            clip: rect(93px, 9999px, 85px, 0);
        }

        80% {
            clip: rect(9px, 9999px, 13px, 0);
        }

        85% {
            clip: rect(13px, 9999px, 30px, 0);
        }

        90% {
            clip: rect(66px, 9999px, 29px, 0);
        }

        95% {
            clip: rect(52px, 9999px, 48px, 0);
        }

        100% {
            clip: rect(4px, 9999px, 80px, 0);
        }
    }

    @-webkit-keyframes noise-anim-2 {
        0% {
            clip: rect(41px, 9999px, 79px, 0);
        }

        5% {
            clip: rect(35px, 9999px, 45px, 0);
        }

        10% {
            clip: rect(73px, 9999px, 89px, 0);
        }

        15% {
            clip: rect(86px, 9999px, 43px, 0);
        }

        20% {
            clip: rect(68px, 9999px, 88px, 0);
        }

        25% {
            clip: rect(7px, 9999px, 4px, 0);
        }

        30% {
            clip: rect(47px, 9999px, 17px, 0);
        }

        35% {
            clip: rect(77px, 9999px, 20px, 0);
        }

        40% {
            clip: rect(44px, 9999px, 96px, 0);
        }

        45% {
            clip: rect(12px, 9999px, 12px, 0);
        }

        50% {
            clip: rect(92px, 9999px, 100px, 0);
        }

        55% {
            clip: rect(95px, 9999px, 36px, 0);
        }

        60% {
            clip: rect(40px, 9999px, 93px, 0);
        }

        65% {
            clip: rect(47px, 9999px, 25px, 0);
        }

        70% {
            clip: rect(32px, 9999px, 50px, 0);
        }

        75% {
            clip: rect(86px, 9999px, 2px, 0);
        }

        80% {
            clip: rect(12px, 9999px, 93px, 0);
        }

        85% {
            clip: rect(43px, 9999px, 13px, 0);
        }

        90% {
            clip: rect(58px, 9999px, 90px, 0);
        }

        95% {
            clip: rect(74px, 9999px, 81px, 0);
        }

        100% {
            clip: rect(18px, 9999px, 47px, 0);
        }
    }

    .glitch-text:after {
        content: attr(data-text);
        position: absolute;
        left: 2px;
        text-shadow: -1px 0 red;
        top: 1rem;
        -webkit-animation: noise-anim 2s infinite linear alternate-reverse;
    }

    .glitch-text:before {
        content: attr(data-text);
        position: absolute;
        left: -2px;
        text-shadow: 1px 0 blue;
        top: 1rem;
        -webkit-animation: noise-anim-2 2s infinite linear alternate-reverse;
    }
    </style>
</head>

<body>
	<div class='glitch-text' data-text='moo'>cow</div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title></title>
	<style>
	@-webkit-keyframes noise-anim {
	0% {
	clip: rect(21px, 9999px, 64px, 0);
	}

	5% {
	clip: rect(90px, 9999px, 91px, 0);
	}

	10% {
	clip: rect(7px, 9999px, 21px, 0);
	}

	15% {
	clip: rect(78px, 9999px, 67px, 0);
	}

	20% {
	clip: rect(66px, 9999px, 51px, 0);
	}

	25% {
	clip: rect(21px, 9999px, 2px, 0);
	}

	30% {
	clip: rect(24px, 9999px, 36px, 0);
	}

	35% {
	clip: rect(9px, 9999px, 73px, 0);
	}

	40% {
	clip: rect(37px, 9999px, 78px, 0);
	}

	45% {
	clip: rect(16px, 9999px, 49px, 0);
	}

	50% {
	clip: rect(59px, 9999px, 31px, 0);
	}

	55% {
	clip: rect(45px, 9999px, 7px, 0);
	}

	60% {
	clip: rect(49px, 9999px, 75px, 0);
	}

	65% {
	clip: rect(56px, 9999px, 46px, 0);
	}

	70% {
	clip: rect(94px, 9999px, 24px, 0);
	}

	75% {
	clip: rect(93px, 9999px, 85px, 0);
	}

	80% {
	clip: rect(9px, 9999px, 13px, 0);
	}

	85% {
	clip: rect(13px, 9999px, 30px, 0);
	}

	90% {
	clip: rect(66px, 9999px, 29px, 0);
	}

	95% {
	clip: rect(52px, 9999px, 48px, 0);
	}

	100% {
	clip: rect(4px, 9999px, 80px, 0);
	}
	}

	@-webkit-keyframes noise-anim-2 {
	0% {
	clip: rect(41px, 9999px, 79px, 0);
	}

	5% {
	clip: rect(35px, 9999px, 45px, 0);
	}

	10% {
	clip: rect(73px, 9999px, 89px, 0);
	}

	15% {
	clip: rect(86px, 9999px, 43px, 0);
	}

	20% {
	clip: rect(68px, 9999px, 88px, 0);
	}

	25% {
	clip: rect(7px, 9999px, 4px, 0);
	}

	30% {
	clip: rect(47px, 9999px, 17px, 0);
	}

	35% {
	clip: rect(77px, 9999px, 20px, 0);
	}

	40% {
	clip: rect(44px, 9999px, 96px, 0);
	}

	45% {
	clip: rect(12px, 9999px, 12px, 0);
	}

	50% {
	clip: rect(92px, 9999px, 100px, 0);
	}

	55% {
	clip: rect(95px, 9999px, 36px, 0);
	}

	60% {
	clip: rect(40px, 9999px, 93px, 0);
	}

	65% {
	clip: rect(47px, 9999px, 25px, 0);
	}

	70% {
	clip: rect(32px, 9999px, 50px, 0);
	}

	75% {
	clip: rect(86px, 9999px, 2px, 0);
	}

	80% {
	clip: rect(12px, 9999px, 93px, 0);
	}

	85% {
	clip: rect(43px, 9999px, 13px, 0);
	}

	90% {
	clip: rect(58px, 9999px, 90px, 0);
	}

	95% {
	clip: rect(74px, 9999px, 81px, 0);
	}

	100% {
	clip: rect(18px, 9999px, 47px, 0);
	}
	}

	.glitch-text:after {
	content: attr(data-text);
	position: absolute;
	left: 2px;
	text-shadow: -1px 0 red;
	top: 1rem;
	-webkit-animation: noise-anim 2s infinite linear alternate-reverse;
	}

	.glitch-text:before {
	content: attr(data-text);
	position: absolute;
	left: -2px;
	text-shadow: 1px 0 blue;
	top: 1rem;
	-webkit-animation: noise-anim-2 2s infinite linear alternate-reverse;
	}
	</style>
	</head>

	<body>
	<div class='glitch-text' data-text='moo'>cow</div>
	</body>

	</html>