Animation problem with `userChrome.tab.bottom_rounded_corner`

### Describe the bug

There is a problem with the animation of the bottom_rounded_corners.
When you select or hover a tab you see first the corners appearing and then the background of the tab.
If I disable the following rule, there is no problem anymore:
```
button,
toolbarbutton,
stack,
vbox,
.toolbarbutton-icon,
#tabs-newtab-button > .toolbarbutton-icon {
transition: background-color 1s var(--animation-easing-function) !important;
}
button:hover,
toolbarbutton:hover,
stack:hover,
vbox:hover,
.toolbarbutton-icon:hover,
#tabs-newtab-button:hover > .toolbarbutton-icon {
transition: background-color 0.25s var(--animation-easing-function) !important;
}
```

You can see it very good when `userChrome.tab.bottom_rounded_corner_edge` of `chrome` is enabled

### Expected behavior

The animation is also for the tab_bottom_corners

### Screenshots

I was able to capture a screenshot midway:
Also when loading of a tab is finished, you can can see it:

### OS

Windows 10

### OS - Others

_No response_

### Firefox Version

108.0.1

### Distribution

- [X] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)

### Theme

- [ ] Light
- [ ] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [X] System Default
- [ ] Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))

### Theme - More Info

_No response_

### `user.js` setup

user.js setup

```javascript
userChrome.decoration.animate
userChrome.tab.connect_to_window
userChrome.tab.dynamic_separator
userChrome.tab.box_shadow
userChrome.tab.bottom_rounded_corner
userChrome.tab.bottom_rounded_corner.all
userChrome.tab.bottom_rounded_corner.edge
```

### Additional context

_No response_

No file or test is named. Reproduce the tab selection or hover animation with the listed user.js settings, including userChrome.tab.bottom_rounded_corner_edge, then locate the transition rules for the tab bottom corners. Done means the corners and tab background animate together without the corners appearing first.

Written by the indexing model from the issue text.