From 0569a31f5d9e1d5349dd0093faacd234f6e9de66 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Sun, 16 Jan 2022 11:45:00 -0500
Subject: [PATCH 1/2] fix(docs): Update recommendations in Keyframes doc

---
 packages/docs/src/pages/guides/keyframes.mdx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/pages/guides/keyframes.mdx b/packages/docs/src/pages/guides/keyframes.mdx
index e3f79da30..e7ac29d7b 100644
--- a/packages/docs/src/pages/guides/keyframes.mdx
+++ b/packages/docs/src/pages/guides/keyframes.mdx
@@ -16,7 +16,7 @@ library itself. Instead, use [the `keyframes` helper from Emotion](https://emoti
 
 <Note>
 
-Because `@emotion/react` is a dependency of Theme UI, it’s available in your
+`@emotion/react` is a peer dependency of Theme UI, so while required alongside  available in your
 project without manual installation. Installing it separately can cause configuration issues due to
 multiple copies with conflicting versions.
 
@@ -35,15 +35,18 @@ const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 export default (props) => (
   <Box
     {...props}
-    sx={{
-      animationName: fadeIn,
-      animationDuration: '1s',
-      animationFillMode: 'backwards',
-    }}
+    sx={{ animation: `${fadeIn} 1s backwards` }}
   />
 )
 ```
 
+<Note>
+
+To directly set `animationName` using object syntax, append `.toString()` to the animation variable.
+This workaround is not needed when using the variable inside a template string, such as above.
+
+</Note>
+
 Using template literal syntax:
 
 ```js

From 4fafe03b098eb4e831ab18d87a338e4331de77c3 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Sun, 16 Jan 2022 11:46:53 -0500
Subject: [PATCH 2/2] Finish editing note

---
 packages/docs/src/pages/guides/keyframes.mdx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/pages/guides/keyframes.mdx b/packages/docs/src/pages/guides/keyframes.mdx
index e7ac29d7b..330332202 100644
--- a/packages/docs/src/pages/guides/keyframes.mdx
+++ b/packages/docs/src/pages/guides/keyframes.mdx
@@ -16,9 +16,8 @@ library itself. Instead, use [the `keyframes` helper from Emotion](https://emoti
 
 <Note>
 
-`@emotion/react` is a peer dependency of Theme UI, so while required alongside  available in your
-project without manual installation. Installing it separately can cause configuration issues due to
-multiple copies with conflicting versions.
+`@emotion/react` is a peer dependency of Theme UI, so while required alongside Theme UI packages,
+it needs manual installation in your project.
 
 </Note>