'Having an issue setting up a Keyframe in Tailwind

I'm trying to setup a keyframe animation in tailwind which I am taking from a animation I created in scss on another project. I am getting an error, and am unsure how to fix it and was hoping to maybe get some insight on the matter.

The original animation looks like this:

@keyframes cameraPan {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 40% 10%;
  }
  50% {
    background-position: 0% 10%;
  }
  75% {
    background-position: 10% 40%;
  }
  100% {
    background-position: 0% 0%;
  }
}

The animation from my tailwind.config.js looks like:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      keyframes: {
        cameraPanAnimation: {
          '0%' : { background-position: '0%, 0%'},
          '25%' : { background-position: '40%, 10%'},
          '50%' : { background-position: '0%, 10%'},
          '75%' : { background-position: '10%, 40%'},
          '100%' : { background-position: '0%, 0%'},
        },
      },
    },
    width: {
      '160': '700px',
    },
    colors: {
      backgroundWhite: "#f8f8ff",
      textBlack: "#2e343b",
      accentedPink: "#ed61a2",
    },
    fontFamily: {
      Poppins: ["Poppins", "sans-serif"],
    },
  },
  plugins: [],
};
csssasstailwind-css


Solution 1:[1]

I think you can try this way, change

from

background-position

to

backgroundPosition

'0%' : { backgroundPosition: '0%, 0%'},
'25%' : { backgroundPosition: '40%, 10%'},
'50%' : { backgroundPosition: '0%, 10%'},
'75%' : { backgroundPosition: '10%, 40%'},
'100%' : { backgroundPosition: '0%, 0%'},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Erfan HosseinPoor

Related Questions