From eca60a26f7eea59333b8a81fad9b0c4f3c92dfc7 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Sun, 16 Jan 2022 11:45:00 -0500
Subject: [PATCH] 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