txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wave animation refinement

Browse Source
This commit is contained in:
juanatsap
2026-04-09 11:37:40 +01:00
parent 94043ddc3e 33fd31d246
commit 642d0cc90c
1 changed files with 16 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+16 -23
View File
@@ -48,34 +48,27 @@
top: -8px;
right: -8px;
font-size: 0.85rem;
animation: chatWaveHello 6s ease-in-out 3s forwards;
animation: chatWaveHello 3s ease-in-out 3s forwards;
opacity: 0;
pointer-events: none;
}
@keyframes chatWaveHello {
0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
5% { opacity: 1; transform: scale(1) rotate(0deg); }
8% { transform: scale(1) rotate(15deg); }
11% { transform: scale(1) rotate(-10deg); }
14% { transform: scale(1) rotate(15deg); }
17% { transform: scale(1) rotate(0deg); }
25% { opacity: 0; transform: scale(0.5); }
35% { opacity: 0; transform: scale(0.5) rotate(0deg); }
40% { opacity: 1; transform: scale(1) rotate(0deg); }
43% { transform: scale(1) rotate(15deg); }
46% { transform: scale(1) rotate(-10deg); }
49% { transform: scale(1) rotate(15deg); }
52% { transform: scale(1) rotate(0deg); }
60% { opacity: 0; transform: scale(0.5); }
70% { opacity: 0; transform: scale(0.5) rotate(0deg); }
75% { opacity: 1; transform: scale(1) rotate(0deg); }
78% { transform: scale(1) rotate(15deg); }
81% { transform: scale(1) rotate(-10deg); }
84% { transform: scale(1) rotate(15deg); }
87% { transform: scale(1) rotate(0deg); }
95% { opacity: 0; transform: scale(0.5); }
100% { opacity: 0; }
/* Fade in */
0% { opacity: 0; transform: rotate(0deg); }
8% { opacity: 1; transform: rotate(0deg); }
/* Wave: clockwise → counter-clockwise, 3 swings */
14% { transform: rotate(20deg); }
20% { transform: rotate(-15deg); }
26% { transform: rotate(18deg); }
32% { transform: rotate(-12deg); }
38% { transform: rotate(15deg); }
44% { transform: rotate(-8deg); }
50% { transform: rotate(0deg); }
/* Hold still briefly */
65% { opacity: 1; transform: rotate(0deg); }
/* Fade out */
100% { opacity: 0; transform: rotate(0deg); }
}
/* Hide wave when chat is open */