Fix animating CSS vars with mini animate (#3048)

* Fixing application of CSS variables

* Latest

* Fix tests

Makefile

@@ -95,7 +95,7 @@ test-e2e: test-nextjs test-html test-react test-react-19
 	yarn test-playwright
 
 test-single: build test-mkdir
-	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/animate-presence-pop.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/animate-style.ts"
 
 lint: bootstrap
 	yarn lint

dev/react/src/tests/animate-style-css-var.tsx

@@ -0,0 +1,45 @@
+import { animate } from "framer-motion/dom/mini"
+import { useEffect, useRef } from "react"
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        try {
+            CSS.registerProperty({
+                name: "--x",
+                syntax: "<length>",
+                inherits: false,
+                initialValue: "0px",
+            })
+        } catch (e) {
+            // console.error(e)
+        }
+
+        const animation = animate(
+            ref.current,
+            { "--x": ["0px", "500px"] },
+            { duration: 0.1 }
+        )
+
+        return () => {
+            animation.cancel()
+        }
+    }, [])
+
+    return (
+        <div id="box" ref={ref} style={style}>
+            content
+        </div>
+    )
+}
+
+const style = {
+    width: 100,
+    height: 100,
+    backgroundColor: "#fff",
+    left: "var(--x)",
+    position: "relative",
+} as const

packages/framer-motion/cypress/integration/animate-style.ts

@@ -86,4 +86,14 @@ describe("animateMini()", () => {
                 expect($element.style.opacity).to.equal("1")
             })
     })
+
+    it("works correctly with CSS variables", () => {
+        cy.visit("?test=animate-style-css-var")
+            .wait(500)
+            .get("#box")
+            .should(([$element]: any) => {
+                expect($element.style.getPropertyValue("--x")).to.equal("500px")
+                expect($element.getBoundingClientRect().left).to.equal(500)
+            })
+    })
 })

packages/framer-motion/src/animation/animators/waapi/utils/style.ts

@@ -8,7 +8,7 @@ export function setCSSVar(
     name: string,
     value: string | number
 ) {
-    element.style.setProperty(`--${name}`, value as string)
+    element.style.setProperty(name, value as string)
 }
 
 export function setStyle(