touchfuzzy.css

:root {
  --animation-delay: 10s;
  --animation-duration: 30s;
  --animation-warp: 8s;
  --degree-warp: 0deg;
}
* {
  animation-duration: var(--animation-duration),
    calc(var(--animation-duration) + var(--animation-warp)),
    calc(var(--animation-duration) + var(--animation-warp) * 2);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: var(--animation-delay);
}

body {
  animation-name: skew;
  animation-delay: 60s;
}

figure,
img,
svg,
picture,
video,
iframe,
svg,
canvas,
input,
textarea,
button,
pre,
hr {
  animation-name: hueRotate, scale3D, origin;
}
p,
li,
dd,
dt,
dl,
figcaption,
blockquote,
cite,
h1,
h2,
h3,
h4,
h5,
h6,
details,
summary,
time,
a,
strong,
em {
  --animation-duration: 5s;
  animation-name: blur, skew;
}

@keyframes hueRotate {
  from {
    filter: hue-rotate(0deg) saturate(100%);
  }
  to {
    filter: hue-rotate(180deg) saturate(120%);
  }
}
@keyframes scale3D {
  from {
    transform: scale3D(0.95, 0.95, 1) skew(-1deg, -1deg);
  }
  to {
    transform: scale3D(1.25, 1.25, 1) skew(1deg, 1deg);
  }
}
@keyframes skew {
  0% {
    transform: skew(0deg, 0deg);
  }
  33% {
    transform: skew(0.5deg, 0.5deg);
  }
  66% {
    transform: skew(-0.5deg, -0.5deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
@keyframes origin {
  0% {
    transform-origin: 50% 50%;
  }
  20% {
    transform-origin: 40% 50%;
  }
  40% {
    transform-origin: 60% 40%;
  }
  60% {
    transform-origin: 40% 60%;
  }
  80% {
    transform-origin: 50% 40%;
  }
  100% {
    transform-origin: 50% 50%;
  }
}

@keyframes blur {
  from {
    filter: blur(0em) contrast(100%);
  }
  to {
    filter: blur(0.1em) contrast(200%);
  }
}