Inline css shorthand for animation parameters not working properly

[audiomancer]

Recently, when I was trying to dynamically control css animation parameters from js (the simplest way is to use inline css and interpolate js into it using curly braces), I found that the animation parameters shortand is not working, when placed inline. It works only when it's in the <style> section, whereas separating animation parameters to several lines works as it normally should.

Take a look at those two components in the repl below:
https://svelte.dev/repl/9dcabd5569cb4853b06a8d02d9392fc3?version=3.16.7

Inline shorthand for animation parameters should work as is working in pure css / js like e.g. here:
https://stackoverflow.com/questions/40784938/is-it-possible-to-apply-css-transitions-inline

Regards!

[PatrickG]

That is, because the name of the animation changed in the build process to something like svelte-1ympdso-blink.

[Conduitry]

Yup, if you don't want an animation name scoped to the component, you can prefix its name with -global-, at which point using it from another component works again. This was added in #607 but it was never documented other than in the changelog. We've left #3352 open for documenting it.