Skip to content

Commit 3d9655a

Browse files
kevmodromeConduitry
authored andcommitted
site: add documentation for global keyframes (#4232)
1 parent b9368d5 commit 3d9655a

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

site/content/docs/01-component-format.md

+12
Original file line numberDiff line numberDiff line change
@@ -253,3 +253,15 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
253253
}
254254
</style>
255255
```
256+
257+
---
258+
259+
If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
260+
261+
The `-global-` part will be removed when compiled, and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.
262+
263+
```html
264+
<style>
265+
@keyframes -global-my-animation-name {...}
266+
</style>
267+
```

0 commit comments

Comments
 (0)