add animation docs

Author: gkurt

src/content/reference/css/animation.md …ontent/reference/animations/animation.mdsrc/content/reference/css/animation.md renamed to src/content/reference/animations/animation.md src/content/reference/css/animation.md renamed to src/content/reference/animations/animation.md

@@ -3,7 +3,7 @@ title: Audio
 layout: API
 ---
 
-Plays audio in certain situations. This property is unique to React Unity and does not exist in web CSS.
+Plays audio in certain situations. This property is unique to React Unity and does not exist in standard CSS.
 
 The property must have the format `<url> <delay> <iteration-count | infinite>`
 - Example: `url(res:click) 400ms 1` - Meaning to play the resource named `click` after 400ms delay once

src/content/reference/css/audio.md src/content/reference/animations/audio.mdsrc/content/reference/css/audio.md renamed to src/content/reference/animations/audio.md

@@ -0,0 +1,59 @@
+---
+title: Enter/Leave Animations
+layout: API
+---
+
+The CSS `:enter` and `:leave` pseudo selectors can be used with the `transition` property to animate the insertion and removal of elements.
+
+When an element is inserted into the DOM, the `:enter` pseudo-class is applied to it. When an element is removed from the DOM, the `:leave` pseudo-class is applied to it. The duration these classes are applied can be controlled with the `state-duration` property.
+
+<Sandpack>
+
+```js
+export default function App() {
+  const [count, setCount] = React.useState(0);
+
+  return <>
+    <button onClick={() => setCount(x => x + 1)}>
+      Add element
+    </button>
+
+    <button onClick={() => setCount(x => x - 1)}>
+      Remove element
+    </button>
+
+    {Array.from({ length: count }).map((_, i) => (
+      <view key={i} className="item">
+        Element {i}
+      </view>
+    ))}
+  </>;
+}
+```
+
+```css active
+:root {
+  gap: 10px;
+}
+
+.item {
+  flex-direction: row;
+  align-items: center;
+  transition: all 0.5s;
+
+  state-duration: 0.5s;
+}
+
+.item:enter {
+  state-duration: 0s;
+  translate: -100px 0;
+  opacity: 0;
+}
+
+.item:leave {
+  translate: 100px 0;
+  opacity: 0;
+}
+```
+
+</Sandpack>

src/content/reference/animations/enter-leave.md

@@ -0,0 +1,12 @@
+---
+title: Animations
+layout: API
+---
+
+There are several ways to animate elements in ReactUnity:
+
+- With CSS `keyframes` and `animation` to create custom animations
+- With CSS `transition` property to animate changes in properties
+- With CSS `:enter` and `:leave` pseudo-classes with `transition` property to animate element insertion and removal
+- With CSS `motion` property to animate changes to rect transform
+- With CSS `audio` property to play audio clips

src/content/reference/animations/index.md

@@ -0,0 +1,35 @@
+---
+title: Rect Transform Animations (motion)
+layout: API
+---
+
+The `motion` property is used to animate changes to the rect transform of an element. This property is unique to React Unity and does not exist in standard CSS.
+
+The property must have the format `<duration> <delay> <timing-function>`. The properties can also be set individually as `motion-duration`, `motion-delay`, and `motion-timing-function`.
+
+<Sandpack>
+
+```js
+export default function App() {
+  const [big, setBig] = React.useState(false);
+
+  return <>
+    Click the button to toggle its size
+    <button onClick={() => setBig(x => !x)} style={{ width: big ? 300 : 'auto' }}>
+      Click
+    </button>
+  </>;
+}
+```
+
+```css active
+:root {
+  align-items: flex-start;
+}
+
+button, button :text {
+  motion: 0.6s 0.1s ease-in-out;
+}
+```
+
+</Sandpack>

src/content/reference/animations/motion.md

@@ -103,18 +103,10 @@
           "title": "CSS Properties",
           "path": "/reference/css",
           "routes": [
-            {
-              "title": "Animation",
-              "path": "/reference/css/animation"
-            },
             {
               "title": "Appearance",
               "path": "/reference/css/appearance"
             },
-            {
-              "title": "Audio",
-              "path": "/reference/css/audio"
-            },
             {
               "title": "Background Color",
               "path": "/reference/css/background-color"
@@ -175,10 +167,6 @@
               "title": "Transform Origin",
               "path": "/reference/css/transform-origin"
             },
-            {
-              "title": "Transition",
-              "path": "/reference/css/transition"
-            },
             {
               "title": "Translate",
               "path": "/reference/css/translate"
@@ -193,6 +181,32 @@
             }
           ]
         },
+        {
+          "title": "Animations",
+          "path": "/reference/animations",
+          "routes": [
+            {
+              "title": "CSS Keyframes",
+              "path": "/reference/animations/animation"
+            },
+            {
+              "title": "CSS Transition",
+              "path": "/reference/animations/transition"
+            },
+            {
+              "title": "Enter/Leave Animations",
+              "path": "/reference/animations/enter-leave"
+            },
+            {
+              "title": "Rect Transform Animations (motion)",
+              "path": "/reference/animations/motion"
+            },
+            {
+              "title": "Audio",
+              "path": "/reference/animations/audio"
+            }
+          ]
+        },
         {
           "title": "CSS Media Queries",
           "path": "/reference/media-queries"