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 46d8f7d282
commit 275f2d75c3
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!");
position: absolute;
left: 55%;
top: 100%;
transform: translateX(-50%) scale(0.2);
bottom: 0;
transform: translateX(-50%) translateY(100%) scale(0.5);
font-family: system-ui, -apple-system, sans-serif;
font-size: 2rem;
font-weight: 800;
@@ -675,7 +675,7 @@ kbd {
padding: 1.25rem 2rem 1.75rem;
z-index: 10;
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;
white-space: nowrap;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
@@ -759,23 +759,21 @@ kbd {
@keyframes crispy-bounce {
0% {
top: 100%;
transform: translateX(-50%) translateY(0) scale(0.2);
transform: translateX(-50%) translateY(100%) scale(0.5);
opacity: 0;
}
20% {
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(1.3);
transform: translateX(-50%) translateY(-80%) scale(1.1);
opacity: 1;
}
35% {
transform: translateX(-50%) translateY(-70%) scale(1);
}
65% {
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(1);
opacity: 1;
transform: translateX(-50%) translateY(-72%) scale(1);
}
100% {
top: 100%;
transform: translateX(-50%) translateY(0) scale(0.2);
transform: translateX(-50%) translateY(100%) scale(0.5);
opacity: 0;
}
}