Version

3.0.6

Reproduction link

https://github.com/mvsde/vue-3.0.6-scoped-animations

Steps to reproduce

1. Run the test project with npm run serve.
2. Open the dev server URL in a browser.
3. Observe the two colored boxes.

What is expected?

Both colored boxes rotate (works in 3.0.5).

What is actually happening?

Only the box with unscoped styles rotates.

The generated CSS looks like this. Note the "scoped" keyframe:

@keyframes rotate-scoped-341d6b1f {
  to[data-v-341d6b1f] {
    transform: rotate(1turn)
  }
}

This issue broke my code. Could you please fix it ASAP?

@CarterLi watch #3308 - but in the meantime put the keyframes definitions in their own non-scoped <style> tag. Should solve your issue for the moment.