From 093c0093cebd4c61759dddc4210a1b14e8d00141 Mon Sep 17 00:00:00 2001 From: tdro Date: Fri, 22 Sep 2023 10:54:18 -0400 Subject: assets/css/default: Fix text animation hover For browsers that ignore inline block --- assets/css/default.css | 69 +++++++++++++++++++++++++++----------------------- 1 file changed, 37 insertions(+), 32 deletions(-) (limited to 'assets') 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); } } -- cgit v1.2.3