From 1c1656e94efa7486c5046723426e99d16ad11033 Mon Sep 17 00:00:00 2001 From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com> Date: Thu, 28 Mar 2024 00:18:04 -0700 Subject: [PATCH] add shake animation (#12) --- components/foot.tsx | 2 +- static/global.css | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/components/foot.tsx b/components/foot.tsx index bc52d66..92b2685 100644 --- a/components/foot.tsx +++ b/components/foot.tsx @@ -12,7 +12,7 @@ export default function Foot( @FartLabs {" "} - 🧪 + 🧪

); diff --git a/static/global.css b/static/global.css index 2916c9c..81a4eda 100644 --- a/static/global.css +++ b/static/global.css @@ -54,6 +54,15 @@ body { padding: 1em; } +.fl-icon { + position: absolute; + text-decoration: none; +} + +.fl-icon:hover { + animation: shake 560ms ease-in-out; +} + .table-of-contents ol { margin-left: 1em; } @@ -67,3 +76,35 @@ body { "foot foot foot"; } } + +@keyframes shake { + 0% { + scale: 1; + transform: rotate(0deg); + } + + 20% { + transform: rotate(-25deg); + } + + 40% { + transform: rotate(10deg); + } + + 50% { + scale: 1.2; + } + + 60% { + transform: rotate(-25deg); + } + + 80% { + transform: rotate(10deg); + } + + 100% { + scale: 1; + transform: rotate(0deg); + } +}