fix: rewrite gradient border with @property CSS angle animation

Pure CSS approach: @property --border-angle + conic-gradient on border-box.
No extra elements, no overflow issues, no JS animation.
Smooth rotation via CSS Houdini custom property animation.
This commit is contained in:
Fringg
2026-02-25 08:48:48 +03:00
parent e95db23573
commit d8b83ccdb8
3 changed files with 39 additions and 22 deletions

View File

@@ -173,13 +173,8 @@ export default {
'move-horizontal': 'moveHorizontal 40s ease infinite',
'move-in-circle-fast': 'moveInCircle 20s ease infinite',
'spotlight-ace': 'spotlightAce 2s ease 0.75s 1 forwards',
'border-spin': 'borderSpin 3s linear infinite',
},
keyframes: {
borderSpin: {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },