diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index d540a998c8..3b120bfbf5 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -253,3 +253,13 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
 	}
 </style>
 ```
+
+If you want to make @keyframes that are accesible globally you need to prepend your keyframe names with `-global-`.
+
+```html
+<style>
+	@keyframes -global-my-animation-name {...}
+</style>
+```
+
+The `-global-` part will be remove when compiled and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.