valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine logo animation — bloom shrink + outer ring slow spin

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-29 18:08:39 +02:00
parent 70aa6f96d8
commit 99a41ad127
2 changed files with 16 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+15 -24
View File
@@ -631,38 +631,29 @@ footer nav a.label:hover svg {
transform-origin: 50% 50%;
}
/* Rotation — use standalone `rotate` so `scale` can animate independently */
.logo-bloom:not(.logo-static) .logo-r1 {
animation: logo-cw 30s linear infinite, logo-bloom-r1 6s ease-in-out 2s infinite;
/* Inner two rings spin + breathe; outer ring blooms */
.logo-bloom:not(.logo-static) .logo-r3 {
animation: logo-cw 12s linear infinite, logo-breath-r3 5s ease-in-out 1.2s infinite;
}
.logo-bloom:not(.logo-static) .logo-r2 {
animation: logo-ccw 20s linear infinite, logo-bloom-r2 6s ease-in-out 1s infinite;
animation: logo-ccw 20s linear infinite, logo-breath-r2 5s ease-in-out 0.6s infinite;
}
.logo-bloom:not(.logo-static) .logo-r3 {
animation: logo-cw 12s linear infinite, logo-bloom-r3 6s ease-in-out 0s infinite;
.logo-bloom:not(.logo-static) .logo-r1 {
animation: logo-cw 40s linear infinite, logo-bloom-r1 5s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite;
}
/* Speed up rotation on hover */
.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s, 6s; }
.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s, 6s; }
.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s, 6s; }
@keyframes logo-cw { to { rotate: 360deg; } }
@keyframes logo-cw { to { rotate: 360deg; } }
@keyframes logo-ccw { to { rotate: -360deg; } }
/* Bloom pulse — inner first, ripples outward */
@keyframes logo-bloom-r3 {
0%, 100% { scale: 1; }
40% { scale: 1.06; }
60% { scale: 1.06; }
@keyframes logo-breath-r3 {
0%, 100% { scale: 1; }
50% { scale: 0.97; }
}
@keyframes logo-bloom-r2 {
0%, 100% { scale: 1; }
40% { scale: 1.05; }
60% { scale: 1.05; }
@keyframes logo-breath-r2 {
0%, 100% { scale: 1; }
50% { scale: 0.92; }
}
@keyframes logo-bloom-r1 {
0%, 100% { scale: 1; }
40% { scale: 1.04; }
60% { scale: 1.04; }
0%, 100% { scale: 1; }
50% { scale: 0.85; }
}