fix(docs): Update recommendations in Keyframes doc

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