`animation-*` (`@keyframes`) broken with Stitches

[Arnau Jiménez]

👋 @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:

@keyframes spin {
  .c-hcAcCC to { transform: rotate(360deg) }
}

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?

[Ben Rogerson]

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.

[Arnau Jiménez]

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.