How to give custom animation-duration in tailwind

[abhi40308]

I was going to raise a question, and typed it already, but then i figured it out. So I'm still submitting it if helps someone :).

I'm trying to give a custom animation-duration.

This is my config:

module.exports = {
  theme: {
    extend: {
          keyframes: {
                  fadeIn: {
                    '0%': {
                      opacity: '0',
                      scale: '90',
                    },
                    '50%': {
                      opacity: '.5',
                      scale: '95',
                    },
                    '100%': {
                      opacity: '1',
                      scale: '100',
                    },
                  },
                },

This works:

<div className="animate-[fadeIn_1s_ease-out_3s_forwards]" />

How can I achieve this?

<div className="animate-[fadeIn_300ms_ease-out_900ms_forwards]" />

I tried this:

animation: {
        animationDelay: {
          '300ms': '300ms',
          '900ms': '900ms',
        },
        animationDuration: {
          '300ms': '300ms',
          '900ms': '900ms',
        },

Any help much appreciated. Thanks 🙏

Solution:
Try something similar to transitionDelay , this works for me:

module.exports = {
  theme: {
    extend: {
      animationDuration: {
        '300ms': '300ms',
        '900ms': '900ms',
      },
      animationDelay: {
        '300ms': '300ms',
        '900ms': '900ms',
      },
    }
  }
}

[abhi40308]

Update: check this discussion for the correct way to do it.