WPF. XAML. How to fix/improve the animation?

Question

WPF

Question 1
I have a button with my own style, on the button there is a picture (gear). In the style, I made the image rotate on hover. The question is how in XAML (namely in XAML, in code, of course, I can do everything manually, but I don’t want to complicate it too much) to implement so that the rotation animation plays when the cursor is over the button, but when it leaves the button, it plays until the gear will not be in the normal position (0 degrees counted from the top cog).
Now I've made animation through two triggers, MouseEnter and MouseLeave. In MouseEnter, in infinite animation, I rotate the picture by 60 degrees (to the distance between the teeth, 360 / 6 (number of teeth)), and in MouseLeave I return it to 0 position. But because of this, a not very beautiful effect occurs, when the cursor leaves the button, the picture turns back, moving the upper right prong to the top position. And I want the picture to continue turning in the same direction and stop at the top left tooth. On the GIF, the current animation is:

---
Question 2
I also noticed one bug (?) when when you move the cursor to the borders of the button, the MouseEnter and MouseLeave animations are played at the same time, which makes the button twitch. I assume that this is due to the fact that the button (Rectangle, in my style) is square, and while the animation is playing, the cursor sometimes falls on the button area, sometimes not. Below is a GIF:

Another strange thing was also discovered. The button, in style, I have in the Grid (this is not necessary for one Rectangle, I just tested various options), and so, if you set the background (background) for the Grid, no matter which one, then the animation works correctly, as soon as the cursor enters /leaves the button area. Gif for demonstration:

I don't understand how the Grid's background affects its size (I wrote above that I assume that the cursor enters / exits the button area) and why setting a background for it solves this problem. I don't want to additionally set the background color in Grid'e. it can change, of course you can just "bind" it, but it seems to me that this is wrong. I need a transparent (but displaying the button it contains) Grid that will correctly display and animate.

Answer 1

(banal crutch)
Have you tried setting the OpacityMask to the same color as the background?
So that the background is as if it were, but 100% transparent.