content/canory/messages/animations: Add hang and squeeze

1 files changed, 41 insertions, 27 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index e2da533..3034021 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -2079,6 +2079,41 @@ text-animation[default] {
   animation: tilt-rightward 0.15s infinite, tilt-leftward 0.2s infinite;
 }
 
+text-animation[hang] {
+  animation: tilt-rightward 1.3s infinite, tilt-leftward 1.8s infinite;
+}
+
+text-animation[squeeze] {
+  animation: squeeze 1s infinite;
+}
+
+text-animation[twitch] {
+  animation: quiver 2.25s infinite, quiver 1.45s infinite;
+}
+
+text-animation[tremble] {
+  animation: leftward 0.1s infinite, quiver 0.75s infinite,
+    quiver 1.35s infinite;
+}
+
+text-animation[grow] {
+  animation: maximize 1.4s infinite;
+}
+
+text-animation[shrink] {
+  animation: minimize 1.25s infinite;
+}
+
+text-animation[grow],
+text-animation[shrink] {
+  transform-origin: right 1rem;
+}
+
+text-animation[distort] span {
+  animation: distort 0.25s infinite, distort 0.55s infinite,
+    distort 0.75s infinite;
+}
+
 text-animation[roll] span {
   animation: rotateY 2s infinite;
   animation-delay: calc(0.2s * var(--frame));
@@ -2117,15 +2152,6 @@ text-animation[hop] span {
   animation: hop 1s infinite;
 }
 
-text-animation[twitch] {
-  animation: quiver 2.25s infinite, quiver 1.45s infinite;
-}
-
-text-animation[tremble] {
-  animation: leftward 0.1s infinite, quiver 0.75s infinite,
-    quiver 1.35s infinite;
-}
-
 text-animation[shake] span {
   animation: left 0.15s infinite;
 }
@@ -2142,24 +2168,6 @@ text-animation[vibrate] span {
   animation: up 0.125s infinite, left 0.15s infinite;
 }
 
-text-animation[grow] {
-  animation: maximize 1.4s infinite;
-}
-
-text-animation[shrink] {
-  animation: minimize 1.25s infinite;
-}
-
-text-animation[grow],
-text-animation[shrink] {
-  transform-origin: right 1rem;
-}
-
-text-animation[distort] span {
-  animation: distort 0.25s infinite, distort 0.55s infinite,
-    distort 0.75s infinite;
-}
-
 @keyframes rotateY {
   0%,
   50% {
@@ -2217,6 +2225,12 @@ text-animation[distort] span {
   }
 }
 
+@keyframes squeeze {
+  50% {
+    transform: scale(0.95, 1);
+  }
+}
+
 @keyframes maximize {
   0% {
     transform: scale(1, 1.25);