themes/default/layouts/shortcodes/animate: Add animate

1 files changed, 206 insertions, 0 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index a923d4b..dc5acfb 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -2048,3 +2048,209 @@ main micro-card:first-of-type reaction-tip img {
     display: none;
   }
 }
+
+/* ----- Animations ----- */
+
+text-animation {
+  height: 0;
+}
+
+text-animation,
+text-animation span {
+  display: inline-block;
+}
+
+text-animation[rattle],
+text-animation[default] {
+  animation: tilt-rightward 0.15s infinite, tilt-leftward 0.2s infinite;
+}
+
+text-animation[roll] span {
+  animation: rotateY 2s infinite;
+  animation-delay: calc(0.2s * var(--frame));
+}
+
+text-animation[flip] span {
+  animation: rotateX 2.35s infinite;
+  animation-delay: calc(0.2s * var(--frame));
+}
+
+text-animation[twirl] span {
+  animation: rotateZ 3s infinite;
+  animation-delay: calc(0.2s * var(--frame));
+}
+
+text-animation[wave] span {
+  animation: up 1s infinite;
+  animation-delay: calc(0.1s * var(--frame));
+}
+
+text-animation[skip] span {
+  animation: skip 1s infinite;
+  animation-delay: calc(0.1s * var(--frame));
+}
+
+text-animation[jiggle] span {
+  animation: up 0.2s infinite, down 0.3s infinite, leftward 0.25s infinite;
+  animation-delay: calc(0.1s * var(--frame));
+}
+
+text-animation[float] span {
+  animation: up 1s infinite;
+}
+
+text-animation[hop] span {
+  animation: hop 1s infinite;
+}
+
+text-animation[twitch] {
+  animation: quiver 2.25s infinite, quiver 1.45s infinite;
+}
+
+text-animation[tremble] {
+  animation: quiver 0.15s infinite, quiver 0.25s infinite, quiver 0.35s infinite;
+}
+
+text-animation[shake] span {
+  animation: left 0.15s infinite;
+}
+
+text-animation[waggle] span {
+  animation: left 0.5s infinite;
+}
+
+text-animation[jump] span {
+  animation: up 0.15s infinite;
+}
+
+text-animation[vibrate] span {
+  animation: up 0.125s infinite, left 0.15s infinite;
+}
+
+text-animation[grow] span {
+  animation: maximize 1s infinite;
+}
+
+text-animation[shrink] span {
+  animation: minimize 1s infinite;
+}
+
+text-animation[distort] span {
+  animation: distort 1.5s infinite;
+}
+
+@keyframes rotateY {
+  0%,
+  50% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes rotateX {
+  0%,
+  50% {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes rotateZ {
+  0%,
+  50% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes tilt-rightward {
+  50% {
+    transform: rotateZ(7.5deg);
+  }
+}
+
+@keyframes tilt-leftward {
+  50% {
+    transform: rotateZ(-7.5deg);
+  }
+}
+
+@keyframes up {
+  50% {
+    transform: translateY(-0.15rem);
+  }
+}
+
+@keyframes down {
+  50% {
+    transform: translateY(0.15rem);
+  }
+}
+
+@keyframes left {
+  50% {
+    transform: translateX(-0.15rem);
+  }
+}
+
+@keyframes leftward {
+  50% {
+    transform: translateX(-0.05rem);
+  }
+}
+
+@keyframes maximize {
+  50% {
+    transform: scale(1.15);
+  }
+}
+
+@keyframes minimize {
+  50% {
+    transform: scale(0.85);
+  }
+}
+
+@keyframes skip {
+  0%,
+  50%,
+  100% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(-0.25rem);
+  }
+}
+
+@keyframes hop {
+  0%,
+  30%,
+  50% {
+    transform: translateY(0);
+  }
+  10%,
+  40% {
+    transform: translateY(-0.25rem);
+  }
+}
+
+@keyframes quiver {
+  5% {
+    transform: translateY(-0.025rem) skewX(-5deg) scale(0.9);
+  }
+  10% {
+    transform: none;
+  }
+}
+
+@keyframes distort {
+  0% {
+    text-shadow: 1px 1px var(--danger), -1px -1px var(--link);
+  }
+  10% {
+    text-shadow: -1px -2px var(--danger), 1px 1px var(--link);
+  }
+  15% {
+    text-shadow: 1px -1px var(--danger), -1px 1px var(--link);
+  }
+  100% {
+    text-shadow: none;
+  }
+}