From f22a785723b751a40c9ad54d426c2ead9d8a0ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20=C3=85berg=20Kultalahti?=
 <kevmodrome@users.noreply.github.com>
Date: Wed, 8 Jan 2020 23:19:19 +0100
Subject: [PATCH] site: add documentation for global keyframes (#4232)

---
 site/content/docs/01-component-format.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

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