@mochi-css/vanilla 0.1.0 → 1.1.0

package/README.md

@@ -1,6 +1,7 @@
 # Mochi-CSS/vanilla
 
-This package is part of the [Mochi-CSS project](https://github.com/Niikelion/mochi-css). It provides type-safe CSS-in-JS styling functions with static extraction support, allowing you to write styles in TypeScript that get extracted to plain CSS at build time.
+This package is part of the [Mochi-CSS project](https://github.com/Niikelion/mochi-css).
+It provides type-safe CSS-in-JS styling functions with static extraction support, allowing you to write styles in TypeScript that get extracted to plain CSS at build time.
 
 ## Functions
 
@@ -18,7 +19,7 @@ const buttonStyles = css({
 })
 
 // Use in JSX
-<button className={buttonStyles}>Click me</button>
+const button = <button className={buttonStyles}>Click me</button>
 ```
 
 Output of the `css` function is also a valid style definition, so you can split your styles:
@@ -358,3 +359,63 @@ const buttonStyle = css({
 Tokens can be used in two ways:
 - **As values**: Use the token directly (e.g., `backgroundColor: buttonColor`) to reference the CSS variable
 - **As keys**: Use `token.variable` (e.g., `[buttonColor.variable]: primaryColor`) to assign a value to the CSS variable
+
+## Keyframes
+
+The `keyframes` function lets you define CSS animations using the same type-safe syntax as style definitions.
+
+### Basic Usage
+
+Define animation stops using `from`/`to` or percentage keys:
+
+```ts
+import { keyframes, css } from "@mochi-css/vanilla"
+
+const fadeIn = keyframes({
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+})
+
+const fadeInStyle = css({
+    animation: `${fadeIn} 0.3s ease`
+})
+```
+
+### Percentage Stops
+
+For more control over animation timing, use percentage-based stops:
+
+```ts
+import { keyframes, css } from "@mochi-css/vanilla"
+
+const bounce = keyframes({
+    "0%": { transform: "translateY(0)" },
+    "50%": { transform: "translateY(-20px)" },
+    "100%": { transform: "translateY(0)" }
+})
+
+const bouncingElement = css({
+    animation: `${bounce} 1s ease-in-out infinite`
+})
+```
+
+### Multiple Properties
+
+Each stop can contain multiple CSS properties with auto-units:
+
+```ts
+import { keyframes } from "@mochi-css/vanilla"
+
+const grow = keyframes({
+    from: {
+        opacity: 0,
+        transform: "scale(0.5)",
+        fontSize: 12  // becomes 12px
+    },
+    to: {
+        opacity: 1,
+        transform: "scale(1)",
+        fontSize: 24  // becomes 24px
+    }
+})
+```