From 5b8d6240300c5e090a88eedacf8ebbfdb1422437 Mon Sep 17 00:00:00 2001 From: tdro Date: Tue, 13 Dec 2022 20:20:45 -0500 Subject: content/canory/messages/animations: Add hang and squeeze --- assets/css/default.css | 68 +++++++++++++++++++++-------------- content/canory/messages/animations.md | 4 +-- 2 files changed, 43 insertions(+), 29 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); diff --git a/content/canory/messages/animations.md b/content/canory/messages/animations.md index f298b8b..e169d66 100644 --- a/content/canory/messages/animations.md +++ b/content/canory/messages/animations.md @@ -9,11 +9,11 @@ Text animations are out of style. Wait.. {{< animate waggle "nu-uh" >}}, just checked the clock --- and would ya know they're back in {{< animate twirl style >}}. -- Observe the {{< animate roll signs. >}} Reality {{< animate flip bingo >}}. +- {{< animate roll Observe >}} the {{< animate hang signs. >}} Reality {{< animate flip bingo >}}. - We are {{< animate float floating >}} on magic pixie dust. Very {{< animate tremble scary. >}} - My ego is under {{< animate vibrate attack >}}. Oh {{< animate jiggle "noo!" >}} - Just pick {{< animate hop me >}} please, {{< animate twitch pretty >}} please.. - It's all just an {{< animate skip animation >}}. Frames per second: {{< animate rattle "Infinite!" >}} - Command line {{< animate wave flags. >}} Sorcery and {{< animate distort runes. >}} -- Resist the {{< animate shake struggle >}}. You must {{< animate jump fight >}}. +- Resist the {{< animate shake struggle >}}. You must {{< animate jump fight >}}. Now {{< animate squeeze breathe. >}} - Big {{< animate shrink weak >}}, Little {{< animate grow strong. >}} -- cgit v1.2.3