CSS Animation Jumps on Hover in a Vue 3 Project with Tailwind CSS
I'm collaborating on a project where I'm having a hard time understanding I've looked through the documentation and I'm still confused about I'm working with an scenario with a CSS animation that jumps unexpectedly when I hover over an element in my Vue 3 application using Tailwind CSS. I have a button that should smoothly transition its background color and scale size on hover, but instead of a smooth effect, there's a noticeable jump that disrupts the user experience. Here's the relevant code for the button: ```html <template> <button class="transition-transform duration-300 ease-in-out transform hover:scale-105 hover:bg-blue-500 bg-blue-400 text-white py-2 px-4 rounded"> Hover Me </button> </template> ``` I've tried adjusting the `duration`, changing the `ease` values, and even adding `will-change: transform, background-color;` to the button's styles, but the scenario continues. The button's original background color is `bg-blue-400`, and on hover, it should change to `bg-blue-500` with a slight scaling effect. Despite these adjustments, when I hover, it feels like there's a jump in the scaling and color transition that makes it look unpolished. I'm using Tailwind CSS v2.2.19 and Vue 3.0.0. Could anyone guide to understand why this might be happening and how I can achieve a smoother transition without the jump? Any insights or corrections to my current approach would be greatly appreciated! This is happening in both development and production on Ubuntu 22.04. What are your experiences with this?