Skip to content

Commit 6503e94

Browse files
authored
Merge pull request #36 from sveltejs/master
site: add documentation for global keyframes (sveltejs#4232)
2 parents d33eff4 + 3d9655a commit 6503e94

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

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

Lines changed: 12 additions & 0 deletions
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)