assets/css/default: Fix text animation hover

For browsers that ignore inline block

1 files changed, 37 insertions, 32 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 0d7c572..d5f069c 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -2419,6 +2419,11 @@ nav[hidden] {
 text-animation {
   height: 0;
   cursor: default;
+}
+
+text-animation,
+text-animation span {
+  display: inline-block;
   text-decoration: underline;
   -webkit-text-decoration-style: double;
   text-decoration-style: double;
@@ -2426,41 +2431,41 @@ text-animation {
 
 text-animation:hover,
 text-animation:hover span {
-  display: inline-block;
+  text-decoration: none;
 }
 
-text-animation[rattle],
-text-animation[default] {
+text-animation[rattle]:hover,
+text-animation[default]:hover {
   animation: tilt-rightward 0.1s infinite, tilt-leftward 0.15s infinite;
 }
 
-text-animation[hang] {
+text-animation[hang]:hover {
   animation: tilt-rightward 1.3s infinite, tilt-leftward 1.8s infinite;
 }
 
-text-animation[squeeze] {
+text-animation[squeeze]:hover {
   animation: squeeze 1s infinite;
 }
 
-text-animation[twitch] {
+text-animation[twitch]:hover {
   animation: quiver 2.25s infinite, quiver 1.45s infinite;
 }
 
-text-animation[tremble] {
+text-animation[tremble]:hover {
   animation: leftward 0.1s infinite, quiver 0.75s infinite,
     quiver 1.35s infinite;
 }
 
-text-animation[grow] {
+text-animation[grow]:hover {
   animation: maximize 1.4s infinite;
 }
 
-text-animation[shrink] {
+text-animation[shrink]:hover {
   animation: minimize 1.25s infinite;
 }
 
-text-animation[grow],
-text-animation[shrink] {
+text-animation[grow]:hover,
+text-animation[shrink]:hover {
   transform-origin: right 1rem;
 }
 
@@ -2469,57 +2474,57 @@ text-animation[distort]:hover span {
     distort 0.75s infinite;
 }
 
-text-animation[roll] span {
-  animation: rotateY 2s infinite;
-  animation-delay: calc(0.2s * var(--frame));
+text-animation[roll]:hover span {
+  animation: rotateY 1.5s infinite;
+  animation-delay: calc(0.1s * var(--frame));
 }
 
-text-animation[flip] span {
-  animation: rotateX 2.35s infinite;
-  animation-delay: calc(0.2s * var(--frame));
+text-animation[flip]:hover span {
+  animation: rotateX 1.5s infinite;
+  animation-delay: calc(0.1s * var(--frame));
 }
 
-text-animation[twirl] span {
-  animation: rotateZ 3s infinite;
-  animation-delay: calc(0.2s * var(--frame));
+text-animation[twirl]:hover span {
+  animation: rotateZ 1.5s infinite;
+  animation-delay: calc(0.1s * var(--frame));
 }
 
-text-animation[wave] span {
+text-animation[wave]:hover span {
   animation: up 1s infinite;
   animation-delay: calc(0.1s * var(--frame));
 }
 
-text-animation[skip] span {
+text-animation[skip]:hover span {
   animation: skip 1s infinite;
   animation-delay: calc(0.1s * var(--frame));
 }
 
-text-animation[jiggle] span {
+text-animation[jiggle]:hover 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 {
+text-animation[float]:hover span {
   animation: up 1s infinite;
 }
 
-text-animation[hop] span {
+text-animation[hop]:hover span {
   animation: hop 1s infinite;
 }
 
-text-animation[shake] span {
+text-animation[shake]:hover span {
   animation: left 0.15s infinite;
 }
 
-text-animation[waggle] span {
+text-animation[waggle]:hover span {
   animation: left 0.5s infinite;
 }
 
-text-animation[jump] span {
+text-animation[jump]:hover span {
   animation: up 0.15s infinite;
 }
 
-text-animation[vibrate] span {
+text-animation[vibrate]:hover span {
   animation: up 0.125s infinite, left 0.15s infinite;
 }
 
@@ -2548,21 +2553,21 @@ column-base[position="right"] time {
 
 @keyframes rotateY {
   0%,
-  50% {
+  10% {
     transform: rotateY(360deg);
   }
 }
 
 @keyframes rotateX {
   0%,
-  50% {
+  10% {
     transform: rotateX(360deg);
   }
 }
 
 @keyframes rotateZ {
   0%,
-  50% {
+  10% {
     transform: rotateZ(360deg);
   }
 }