[BUG] CSS keyframe animations not working

[shuklaayush]

1. Describe the bug

Keyframe animations with CSS transform values like translate3d and rotatez have stopped working after release 10.2.4.

2. Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/quizzical-noyce-523rjj

3. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/quizzical-noyce-523rjj?file=/package.json
2. Update framer-motion dependency to ^10.2.4
3. See error Both input and output ranges must be the same length

Code to reproduce

import { motion } from "framer-motion";

export default function App() {
  return (
    <motion.svg
      width="256"
      height="256"
      viewBox="0 0 64 64"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor"
      strokeWidth="2"
    >
      <motion.path
        d="M8,40 V16"
        initial={{
          transform: "translate3d(0px,0,0) rotatez(0deg)"
        }}
        animate={{
          transform: [
            "translate3d(0px,0,0) rotatez(0deg)",
            "translate3d(0px,0,0) rotatez(0deg)",
            "translate3d(25px,0,0) rotatez(-60deg)"
          ]
        }}
        transition={{
          duration: 1,
          type: "spring",
          stiffness: 100
        }}
      />
    </motion.svg>
  );
}

4. Expected behavior

The animation should work.

[iUnstable0]

Im having this issue too, with type spring/intertia

[taisei-13046]

I'm having it too. Please solve, someone.

[mattgperry]

Spring/inertia has never worked with multiple keyframes (you can see in the working animation the animation settings aren't actually taking effect). Adding this support is unlikely but I can make a better error message.

[tcisse]

Hello I have same problem framer version "framer-motion": "^11.0.14",

[tcisse]

in framer-motion:^10.2.4 all is okay

[howdyfrom2019]

same here

[rhijjawi]

in framer-motion:^10.2.4 all is okay

Unfortunately, same issue.

[baijunjie]

same issue in v11.0.20

[pablojsx]

[kai-abat]

Same issue, I encounter this as well if I repeatedly click the SELECT nextui component.

[Felipe-Emanuel]

Same issue, I encounter this as well if I repeatedly click the SELECT nextui component.

Me too, but, as tcisse said, I just downgrade to 10.2.4 and it works perfectly

[pablojsx]

in prod it works fine, only happens in dev

[Deeplobo]

transition={{
                  repeat: Infinity,
                  duration: 5,
                  type: "tween",
                }}

This fixes my problem type=tween