public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix(animation): speech bubble now animates like bowl with scale

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-14 17:23:53 +01:00
parent 033d6f51fc
commit fee0e728dc
1 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/main.css
View File

@@ -664,8 +664,8 @@ kbd {
content: var(--crispy-quote, "Crispyyyyyy!"); content: var(--crispy-quote, "Crispyyyyyy!");
position: absolute; position: absolute;
left: 55%; left: 55%;
top: 100%; bottom: 0;
transform: translateX(-50%) scale(0.2); transform: translateX(-50%) translateY(100%) scale(0.5);
font-family: system-ui, -apple-system, sans-serif; font-family: system-ui, -apple-system, sans-serif;
font-size: 2rem; font-size: 2rem;
font-weight: 800; font-weight: 800;
@@ -675,7 +675,7 @@ kbd {
padding: 1.25rem 2rem 1.75rem; padding: 1.25rem 2rem 1.75rem;
z-index: 10; z-index: 10;
pointer-events: none; pointer-events: none;
animation: crispy-bounce 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation: crispy-bounce 3s ease-in-out forwards;
opacity: 0; opacity: 0;
white-space: nowrap; white-space: nowrap;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
@@ -759,23 +759,21 @@ kbd {
@keyframes crispy-bounce { @keyframes crispy-bounce {
0% { 0% {
top: 100%; transform: translateX(-50%) translateY(100%) scale(0.5);
transform: translateX(-50%) translateY(0) scale(0.2);
opacity: 0; opacity: 0;
} }
20% { 20% {
top: 50%; transform: translateX(-50%) translateY(-80%) scale(1.1);
transform: translateX(-50%) translateY(-50%) scale(1.3);
opacity: 1; opacity: 1;
} }
35% {
transform: translateX(-50%) translateY(-70%) scale(1);
}
65% { 65% {
top: 50%; transform: translateX(-50%) translateY(-72%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
opacity: 1;
} }
100% { 100% {
top: 100%; transform: translateX(-50%) translateY(100%) scale(0.5);
transform: translateX(-50%) translateY(0) scale(0.2);
opacity: 0; opacity: 0;
} }
} }