jQuery .animate() not functioning correctly with CSS transitions on hover state
I'm experiencing an scenario with using jQuery's `.animate()` method in conjunction with CSS transitions on a hover state. Specifically, I have a div that scales up when hovered over using CSS, but when I try to animate it back to its original size using jQuery, it doesn't seem to play nicely with the CSS transition. Here's a simplified version of my code: ```css .box { width: 100px; height: 100px; background-color: blue; transition: transform 0.3s ease; } .box:hover { transform: scale(1.5); } ``` ```html <div class="box"></div> <button id="reset">Reset Size</button> ``` ```javascript $(document).ready(function() { $('#reset').click(function() { $('.box').animate({ width: '100px', height: '100px', // Trying to reset the transform but it doesn't work transform: 'scale(1)' }, 300); }); }); ``` The hover effect works perfectly, scaling the box up when hovered. However, when I click the "Reset Size" button, I expect the box to animate back to its original size, but it doesn't animate the scale transition properly. Instead, the box just jumps back to its original size without the transition effect. The developer console shows no errors. Is there a way to have the jQuery animation work seamlessly with the CSS transitions? Or should I avoid using jQuery's `.animate()` when working with CSS transitions altogether? Any advice or alternative approaches would be appreciated.