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

feat: add bloom pulse animation to header logo, glitch text-only

Browse Source 
- Counter-rotating rings now also pulse outward from center (inner→outer ripple)
- Use standalone `rotate`/`scale` CSS properties so animations don't conflict
- Glitch animation scoped to logo text span only, not the SVG
- Footer logo remains static (logo-static)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-29 10:47:34 +02:00
parent 356098496d
commit 70aa6f96d8
3 changed files with 38 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+35 -9
View File
@@ -573,7 +573,7 @@
94% { transform: translate(0); clip-path: none; }
}
.logo-glitch:hover {
a:hover .logo-glitch {
animation: glitch-clip 2.5s steps(1) infinite;
}
@@ -630,13 +630,39 @@ footer nav a.label:hover svg {
transform-box: fill-box;
transform-origin: 50% 50%;
}
.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw 30s linear infinite; }
.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; }
.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw 12s linear infinite; }
.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; }
.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; }
.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; }
/* 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;
}
.logo-bloom:not(.logo-static) .logo-r2 {
animation: logo-ccw 20s linear infinite, logo-bloom-r2 6s ease-in-out 1s infinite;
}
.logo-bloom:not(.logo-static) .logo-r3 {
animation: logo-cw 12s linear infinite, logo-bloom-r3 6s ease-in-out 0s infinite;
}
@keyframes logo-cw { to { transform: rotate(360deg); } }
@keyframes logo-ccw { to { transform: rotate(-360deg); } }
/* 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-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-bloom-r2 {
0%, 100% { scale: 1; }
40% { scale: 1.05; }
60% { scale: 1.05; }
}
@keyframes logo-bloom-r1 {
0%, 100% { scale: 1; }
40% { scale: 1.04; }
60% { scale: 1.04; }
}