How can I add "ease-in-out" to _hover for my transition?

[snezhoque]

<Container
      _hover={{
        shadow: 'md',
        transform: 'translateY(-5px)',
        transition: '0.2s  ̶e̶a̶s̶e̶-̶i̶n̶-̶o̶u̶t̶',
      }}
>

[hugobqd]

Hello! Split transform's shorthand properties into transitionTimingFunction and transitionDuration (Here are the defaults token, but every valid css attributes is allowed : https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/foundations/transition.ts)

<Container
  _hover={{
    shadow: 'md',
    transform: 'translateY(-5px)',
    transitionDuration: '0.2s',
    transitionTimingFunction: "ease-in-out"
  }}
>

[snezhoque]

thank you!

[sleekLancelot]

Sadly this didn't work for me on backgroundGradient

<Button
  bgGradient={'linear(to-r, rgba(222, 13, 111, 1), rgba(115, 16, 84, 1))'}
  _hover={{
	  bgGradient: 'linear(to-l, rgba(222, 13, 111, 1), rgba(115, 16, 84, 1))',
	  transitionDuration: '2s',
         transitionTimingFunction: "ease-in-out"
  }}
  >...</Button>

[Rishi1204]

Same, it isn't working for me either for bgGradient.

[bstrihova]

because bgGradient is actually a css property of background-image, background-image is not animatable, please see https://stackoverflow.com/questions/19808764/transition-for-background-image-in-firefox for other possible solutions