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

fix: wave animation — fade in, swing clockwise/counter, fade out

Browse Source
This commit is contained in:
juanatsap
2026-04-09 11:37:37 +01:00
parent 84d69fa8db
commit 33fd31d246
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; top: -8px;
right: -8px; right: -8px;
font-size: 0.85rem; font-size: 0.85rem;
animation: chatWaveHello 6s ease-in-out 3s forwards; animation: chatWaveHello 3s ease-in-out 3s forwards;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
@keyframes chatWaveHello { @keyframes chatWaveHello {
0% { opacity: 0; transform: scale(0.5) rotate(0deg); } /* Fade in */
5% { opacity: 1; transform: scale(1) rotate(0deg); } 0% { opacity: 0; transform: rotate(0deg); }
8% { transform: scale(1) rotate(15deg); } 8% { opacity: 1; transform: rotate(0deg); }
11% { transform: scale(1) rotate(-10deg); } /* Wave: clockwise → counter-clockwise, 3 swings */
14% { transform: scale(1) rotate(15deg); } 14% { transform: rotate(20deg); }
17% { transform: scale(1) rotate(0deg); } 20% { transform: rotate(-15deg); }
25% { opacity: 0; transform: scale(0.5); } 26% { transform: rotate(18deg); }
35% { opacity: 0; transform: scale(0.5) rotate(0deg); } 32% { transform: rotate(-12deg); }
40% { opacity: 1; transform: scale(1) rotate(0deg); } 38% { transform: rotate(15deg); }
43% { transform: scale(1) rotate(15deg); } 44% { transform: rotate(-8deg); }
46% { transform: scale(1) rotate(-10deg); } 50% { transform: rotate(0deg); }
49% { transform: scale(1) rotate(15deg); } /* Hold still briefly */
52% { transform: scale(1) rotate(0deg); } 65% { opacity: 1; transform: rotate(0deg); }
60% { opacity: 0; transform: scale(0.5); } /* Fade out */
70% { opacity: 0; transform: scale(0.5) rotate(0deg); } 100% { opacity: 0; transform: 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; }
} }
/* Hide wave when chat is open */ /* Hide wave when chat is open */