Vue3 中用 CSS 实现一个出现故障的时钟，挺有意思！

今天分享一个很有趣的动画： 破坏风时钟动画

完整源码：

源码地址：https://code.juejin.cn/pen/7355385801644965938

<template> <div class="container"> <a class="switcher" href="#"></a> <div class="screen glitch"> <div class="clock is-off"> <span class="time">{{ date }}</span> </div> <div class="figure"></div> <div class="figure-mask"></div> </div> </div></template><script setup lang="ts">import { ref, onMounted } from 'vue';const updateDate = () => { const newDate = new Date(); newDate.setDate(newDate.getDate()); const hours = new Date().getHours(); const seconds = new Date().getSeconds(); const minutes = new Date().getMinutes(); const realTime = (hours < 10 ? '0' : '') + hours + ' : ' + (minutes < 10 ? '0' : '') + minutes + ' : ' + (seconds < 10 ? '0' : '') + seconds; date.value = realTime;};const date = ref('');onMounted(() => { updateDate(); setInterval(() => { updateDate(); }, 1000);});</script>< style scoped>.container { position: relative; height: 200px; color: #fff;}a.switcher { display: block; position: fixed; text-decoration: none; z-index: 999999999999; right: 20px; bottom: 20px; width: 16px; height: 16px; background: transparent; border: 2px solid #fff; border-radius: 50%; opacity: 0.15; transition: opacity 0.15s;}a.switcher:hover { opacity: 1;}a.switcher:before { display: block; content: ''; position: absolute; border-radius: 4px; width: 2px; height: 5px; background: #fff; top: 0; left: 5px;}.screen { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;}.clock { display: block; position: absolute; z-index: 9; width: 720px; height: 128px; text-align: center; top: 0; right: 0; bottom: 0; left: 0; margin: auto; cursor: default;}.clock span { display: block; position: relative; font-size: 128px; line-height: 1;}.clock.is-off { -webkit-animation: is-off 2s linear infinite !important; animation: is-off 2s linear infinite !important;}.glitch:before { position: absolute; z-index: 999999; content: ''; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation: bg-move 2s linear infinite; animation: bg-move 2s linear infinite; background-size: 100% 8px; background-image: linear-gradient( 0, rgba(255, 255, 255, 0.05) 10%, transparent 10%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 60%, transparent 60%, transparent );}.glitch .figure,.glitch .figure-mask { -webkit-transform: skewX(0deg) scaleY(1); transform: skewX(0deg) scaleY(1); -webkit-animation: tr-bag 4s linear infinite; animation: tr-bag 4s linear infinite;}.glitch .clock { -webkit-transform: skewX(0deg) scaleY(1); transform: skewX(0deg) scaleY(1); -webkit-animation: clock-bag 4s linear infinite; animation: clock-bag 4s linear infinite;}.glitch .clock span:before,.glitch .clock span:after { display: block; content: attr(data-time); position: absolute; top: 0; color: #fff; background: #111; overflow: hidden; width: 720px; height: 128px; clip: rect(0, 900px, 0, 0);}.glitch .clock span:before { left: -2px; text-shadow: 2px 0 #00f; animation: c2 1s infinite linear alternate-reverse;}.glitch .clock span:after { left: 3px; text-shadow: -2px 0 #f00; animation: c1 2s infinite linear alternate-reverse;}@-webkit-keyframes is-off { 0% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 57% { opacity: 0; } 58% { opacity: 1; } 71% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 72% { -webkit-transform: scaleY(3) skewX(-60deg); transform: scaleY(3) skewX(-60deg); } 73% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 80% { opacity: 1; } 81% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 91% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } 92% { -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg); transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: #008000; } 93% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; }}@keyframes is-off { 0% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 57% { opacity: 0; } 58% { opacity: 1; } 71% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 72% { -webkit-transform: scaleY(3) skewX(-60deg); transform: scaleY(3) skewX(-60deg); } 73% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 80% { opacity: 1; } 81% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 91% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } 92% { -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg); transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: #008000; } 93% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; }}@-webkit-keyframes c1 { 0% { clip: rect(45px, 9999px, 38px, 0); } 5% { clip: rect(39px, 9999px, 78px, 0); } 10% { clip: rect(13px, 9999px, 55px, 0); } 15.000000000000002% { clip: rect(20px, 9999px, 17px, 0); } 20% { clip: rect(58px, 9999px, 75px, 0); } 25% { clip: rect(98px, 9999px, 62px, 0); } 30.000000000000004% { clip: rect(43px, 9999px, 15px, 0); } 35.00000000000001% { clip: rect(10px, 9999px, 97px, 0); } 40% { clip: rect(28px, 9999px, 48px, 0); } 45% { clip: rect(92px, 9999px, 53px, 0); } 50% { clip: rect(21px, 9999px, 95px, 0); } 55% { clip: rect(88px, 9999px, 74px, 0); } 60.00000000000001% { clip: rect(84px, 9999px, 34px, 0); } 65% { clip: rect(85px, 9999px, 71px, 0); } 70.00000000000001% { clip: rect(45px, 9999px, 71px, 0); } 75% { clip: rect(73px, 9999px, 16px, 0); } 80% { clip: rect(48px, 9999px, 90px, 0); } 85% { clip: rect(13px, 9999px, 89px, 0); } 90% { clip: rect(37px, 9999px, 37px, 0); } 95% { clip: rect(3px, 9999px, 16px, 0); } 100% { clip: rect(35px, 9999px, 44px, 0); }}@keyframes c1 { 0% { clip: rect(45px, 9999px, 38px, 0); } 5% { clip: rect(39px, 9999px, 78px, 0); } 10% { clip: rect(13px, 9999px, 55px, 0); } 15.000000000000002% { clip: rect(20px, 9999px, 17px, 0); } 20% { clip: rect(58px, 9999px, 75px, 0); } 25% { clip: rect(98px, 9999px, 62px, 0); } 30.000000000000004% { clip: rect(43px, 9999px, 15px, 0); } 35.00000000000001% { clip: rect(10px, 9999px, 97px, 0); } 40% { clip: rect(28px, 9999px, 48px, 0); } 45% { clip: rect(92px, 9999px, 53px, 0); } 50% { clip: rect(21px, 9999px, 95px, 0); } 55% { clip: rect(88px, 9999px, 74px, 0); } 60.00000000000001% { clip: rect(84px, 9999px, 34px, 0); } 65% { clip: rect(85px, 9999px, 71px, 0); } 70.00000000000001% { clip: rect(45px, 9999px, 71px, 0); } 75% { clip: rect(73px, 9999px, 16px, 0); } 80% { clip: rect(48px, 9999px, 90px, 0); } 85% { clip: rect(13px, 9999px, 89px, 0); } 90% { clip: rect(37px, 9999px, 37px, 0); } 95% { clip: rect(3px, 9999px, 16px, 0); } 100% { clip: rect(35px, 9999px, 44px, 0); }}@-webkit-keyframes c2 { 0% { clip: rect(78px, 9999px, 41px, 0); } 5% { clip: rect(72px, 9999px, 71px, 0); } 10% { clip: rect(73px, 9999px, 58px, 0); } 15.000000000000002% { clip: rect(55px, 9999px, 14px, 0); } 20% { clip: rect(8px, 9999px, 12px, 0); } 25% { clip: rect(55px, 9999px, 53px, 0); } 30.000000000000004% { clip: rect(85px, 9999px, 11px, 0); } 35.00000000000001% { clip: rect(87px, 9999px, 75px, 0); } 40% { clip: rect(41px, 9999px, 18px, 0); } 45% { clip: rect(52px, 9999px, 70px, 0); } 50% { clip: rect(41px, 9999px, 8px, 0); } 55% { clip: rect(69px, 9999px, 98px, 0); } 60.00000000000001% { clip: rect(8px, 9999px, 92px, 0); } 65% { clip: rect(88px, 9999px, 16px, 0); } 70.00000000000001% { clip: rect(42px, 9999px, 96px, 0); } 75% { clip: rect(7px, 9999px, 29px, 0); } 80% { clip: rect(38px, 9999px, 4px, 0); } 85% { clip: rect(22px, 9999px, 82px, 0); } 90% { clip: rect(31px, 9999px, 97px, 0); } 95% { clip: rect(71px, 9999px, 99px, 0); } 100% { clip: rect(42px, 9999px, 95px, 0); } 23% { -webkit-transform: scaleX(0.8); transform: scaleX(0.8); }}@keyframes c2 { 0% { clip: rect(78px, 9999px, 41px, 0); } 5% { clip: rect(72px, 9999px, 71px, 0); } 10% { clip: rect(73px, 9999px, 58px, 0); } 15.000000000000002% { clip: rect(55px, 9999px, 14px, 0); } 20% { clip: rect(8px, 9999px, 12px, 0); } 25% { clip: rect(55px, 9999px, 53px, 0); } 30.000000000000004% { clip: rect(85px, 9999px, 11px, 0); } 35.00000000000001% { clip: rect(87px, 9999px, 75px, 0); } 40% { clip: rect(41px, 9999px, 18px, 0); } 45% { clip: rect(52px, 9999px, 70px, 0); } 50% { clip: rect(41px, 9999px, 8px, 0); } 55% { clip: rect(69px, 9999px, 98px, 0); } 60.00000000000001% { clip: rect(8px, 9999px, 92px, 0); } 65% { clip: rect(88px, 9999px, 16px, 0); } 70.00000000000001% { clip: rect(42px, 9999px, 96px, 0); } 75% { clip: rect(7px, 9999px, 29px, 0); } 80% { clip: rect(38px, 9999px, 4px, 0); } 85% { clip: rect(22px, 9999px, 82px, 0); } 90% { clip: rect(31px, 9999px, 97px, 0); } 95% { clip: rect(71px, 9999px, 99px, 0); } 100% { clip: rect(42px, 9999px, 95px, 0); } 23% { -webkit-transform: scaleX(0.8); transform: scaleX(0.8); }}@-webkit-keyframes clock-bag { 0% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 2% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 4% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 6% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 8% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 10% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 12% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 14.000000000000002% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 16% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 18% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 20% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 22% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 24% { -webkit-transform: translate(5px, 2px); transform: translate(5px, 2px); } 26% { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px); } 28.000000000000004% { -webkit-transform: translate(5px, 1px); transform: translate(5px, 1px); } 30% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 32% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 34% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 36% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 38% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 40% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 42% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 44% { -webkit-transform: translate(4px, 5px); transform: translate(4px, 5px); } 46.00000000000001% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 48% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 50% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 52% { -webkit-transform: translate(3px, 2px); transform: translate(3px, 2px); } 54% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 56.00000000000001% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 58% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 60% { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px); } 62% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 64% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 66% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 68% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 70.00000000000001% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 72% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 74% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 76% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 78% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 80% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 82.00000000000001% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 84% { -webkit-transform: translate(5px, 2px); transform: translate(5px, 2px); } 86% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 88% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 90% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 92.00000000000001% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 94% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 96% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 98% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 100% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 1% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 1.5% { -webkit-transform: scaleY(3) skewX(-60deg); transform: scaleY(3) skewX(-60deg); } 2% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 51% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg); transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); }}@keyframes clock-bag { 0% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 2% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 4% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 6% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 8% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 10% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 12% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 14.000000000000002% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 16% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 18% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 20% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 22% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 24% { -webkit-transform: translate(5px, 2px); transform: translate(5px, 2px); } 26% { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px); } 28.000000000000004% { -webkit-transform: translate(5px, 1px); transform: translate(5px, 1px); } 30% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 32% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 34% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 36% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 38% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 40% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 42% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 44% { -webkit-transform: translate(4px, 5px); transform: translate(4px, 5px); } 46.00000000000001% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 48% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 50% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 52% { -webkit-transform: translate(3px, 2px); transform: translate(3px, 2px); } 54% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 56.00000000000001% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 58% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 60% { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px); } 62% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 64% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 66% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 68% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 70.00000000000001% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 72% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 74% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 76% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 78% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 80% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 82.00000000000001% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 84% { -webkit-transform: translate(5px, 2px); transform: translate(5px, 2px); } 86% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 88% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 90% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 92.00000000000001% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 94% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 96% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 98% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 100% { -webkit-transform: translate(4px, 3px); transform: translate(4px, 3px); } 1% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 1.5% { -webkit-transform: scaleY(3) skewX(-60deg); transform: scaleY(3) skewX(-60deg); } 2% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 51% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg); transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); }}@-webkit-keyframes tr-bag { 0% { -webkit-transform: translate(3px, 1px); transform: translate(3px, 1px); } 2% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 4% { -webkit-transform: translate(4px, 5px); transform: translate(4px, 5px); } 6% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 8% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 10% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 12% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 14.000000000000002% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 16% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 18% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 20% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 22% { -webkit-transform: translate(4px, 5px); transform: translate(4px, 5px); } 24% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 26% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 28.000000000000004% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 30% { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px); } 32% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 34% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 36% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 38% { -webkit-transform: translate(1px, 2px); transform: translate(1px, 2px); } 40% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 42% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 44% { -webkit-transform: translate(3px, 2px); transform: translate(3px, 2px); } 46.00000000000001% { -webkit-transform: translate(5px, 1px); transform: translate(5px, 1px); } 48% { -webkit-transform: translate(1px, 2px); transform: translate(1px, 2px); } 50% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 52% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 54% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 56.00000000000001% { -webkit-transform: translate(5px, 2px); transform: translate(5px, 2px); } 58% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 60% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 62% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 64% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 66% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 68% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 70.00000000000001% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 72% { -webkit-transform: translate(5px, 1px); transform: translate(5px, 1px); } 74% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 76% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 78% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 80% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 82.00000000000001% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 84% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 86% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 88% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 90% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 92.00000000000001% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 94% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 96% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 98% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 100% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 1% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 1.5% { -webkit-transform: scaleY(3) skewX(-60deg); transform: scaleY(3) skewX(-60deg); } 2% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 51% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg); transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); }}@keyframes tr-bag { 0% { -webkit-transform: translate(3px, 1px); transform: translate(3px, 1px); } 2% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 4% { -webkit-transform: translate(4px, 5px); transform: translate(4px, 5px); } 6% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 8% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 10% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 12% { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px); } 14.000000000000002% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 16% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 18% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 20% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 22% { -webkit-transform: translate(4px, 5px); transform: translate(4px, 5px); } 24% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 26% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 28.000000000000004% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 30% { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px); } 32% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 34% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 36% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 38% { -webkit-transform: translate(1px, 2px); transform: translate(1px, 2px); } 40% { -webkit-transform: translate(1px, 3px); transform: translate(1px, 3px); } 42% { -webkit-transform: translate(4px, 1px); transform: translate(4px, 1px); } 44% { -webkit-transform: translate(3px, 2px); transform: translate(3px, 2px); } 46.00000000000001% { -webkit-transform: translate(5px, 1px); transform: translate(5px, 1px); } 48% { -webkit-transform: translate(1px, 2px); transform: translate(1px, 2px); } 50% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 52% { -webkit-transform: translate(3px, 5px); transform: translate(3px, 5px); } 54% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 56.00000000000001% { -webkit-transform: translate(5px, 2px); transform: translate(5px, 2px); } 58% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 60% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 62% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 64% { -webkit-transform: translate(2px, 3px); transform: translate(2px, 3px); } 66% { -webkit-transform: translate(2px, 5px); transform: translate(2px, 5px); } 68% { -webkit-transform: translate(5px, 3px); transform: translate(5px, 3px); } 70.00000000000001% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 72% { -webkit-transform: translate(5px, 1px); transform: translate(5px, 1px); } 74% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 76% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 78% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 80% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 82.00000000000001% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 84% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 86% { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px); } 88% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); } 90% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 92.00000000000001% { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px); } 94% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 96% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 98% { -webkit-transform: translate(1px, 5px); transform: translate(1px, 5px); } 100% { -webkit-transform: translate(4px, 2px); transform: translate(4px, 2px); } 1% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 1.5% { -webkit-transform: scaleY(3) skewX(-60deg); transform: scaleY(3) skewX(-60deg); } 2% { -webkit-transform: scaleY(1) skewX(0deg); transform: scaleY(1) skewX(0deg); } 51% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { -webkit-transform: scaleX(1.5) scaleY(0.2) skewX(80deg); transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { -webkit-transform: scaleX(1) scaleY(1) skewX(0deg); transform: scaleX(1) scaleY(1) skewX(0deg); }}@-webkit-keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; }}@keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; }}</ style>