틀:글리치/styles.css

.glitch-effect-template {
  position: relative;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
  animation: glitch 725ms infinite, shift 1s ease-in-out infinite alternate;
}
.glitch-effect-template span {
  position: absolute;
  top: 0;
  left: 0;
  animation: shift 1s ease-in-out infinite alternate;
}
.glitch-effect-template span:first-child {
  animation: glitch 500ms infinite, shift 1s ease-in-out infinite alternate;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}
.glitch-effect-template span:last-child {
  animation: glitch 375ms infinite, shift 1s ease-in-out infinite alternate;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}
@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
      0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
      0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
      -0.04em -0.025em 0 #fffc00;
  }
}
@keyframes shift {
	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);
	}
}