diff --git a/packages/docs/src/pages/guides/keyframes.mdx b/packages/docs/src/pages/guides/keyframes.mdx
index e3f79da30..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>
 
-Because `@emotion/react` is a dependency of Theme UI, it’s 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>
 
@@ -35,15 +34,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