Closed ajmnz closed 1 year ago
The @keyframes
are included with the class now so that'd be the change that's broken this, eg:
tw`animate-bounce`
// โ โ โ โ โ โ
({
"@keyframes bounce": {
"0%, 100%": {
"transform": "translateY(-25%)",
"animationTimingFunction": "cubic-bezier(0.8,0,1,1)"
},
"50%": {
"transform": "none",
"animationTimingFunction": "cubic-bezier(0,0,0.2,1)"
}
},
"animation": "bounce 1s infinite"
});
As for a fix, stitches uses their keyframes
import which would be troublesome to work with in babel:
const scaleUp = keyframes({
'0%': { transform: 'scale(1)' },
'100%': { transform: 'scale(1.5)' },
});
const Button = styled('button', {
// base styles
'&:hover': {
animation: `${scaleUp} 200ms`,
},
});
So I'm leaning toward re-adding the previous functionality, which was to include all keyframes in the base (global) layer just as you've been doing manually - that should fix it.
Agreed. It's like 4 keyframes, so it barely affects bundle size. Keep in mind that if classes still include their own keyframes, animation will still be broken regardless.
๐ @ben-rogerson
With v3,
animation
classes seem to be broken when using Stitches. (i.e.animate-spin
).If you check the injected styles in
head > #stitches
, it does some weird stuff where it tries to assign the@keyframes
declaration to a specific class:This causes the element to not spin at all, since the
@keyframes
declaration is broken. Once you manually remove the class (.c-hcAcCC
), the element starts spinning like normal.Check out the reproduction Sandbox
The workaround for now is to manually copy the
@keyframes
declaration to global styles.First thought was that this was Stitches' fault, but then I saw that they don't release since April and that with twin v2.8.2 everything works perfectly. Maybe tailwindcss 3 has something to do with it?