[Feature Request]: Tab hover animations more chromium-like (transition-wise)

[TheDogHusky]

Description

Hey!

Something that has been disturbing me for a while in materialfox, is that the transitions for the tabs hover animation (changing background color) does not match chromium's, not remotely close. I loved hovering on tabs on chromium because of the transitions and the way it looked when i hovered.

Recently, the chromium team has started making webium, chromium browser based on webUI while chromium is based on SkiaUI.

I started looking at their code for the transition, because I can clearly now see it (right click on any element of the browser, and inspect), and here is how they do it:

.tab {
    color: var(--color-tab-foreground-inactive-frame-active);
    background-color: var(--color-tab-background-inactive-frame-active);
    border-radius: 12px 12px 0px 0px;
    height: 36px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: transform 300ms;
}

.tab:not(:hover):not(.active) {
    transition: background-color 300ms ease-in-out;
}

.tab:hover:not(.active) {
    background-color: var(--color-tab-background-highlighted);
    transition: background-color 100ms ease-in-out;
}

Currently on materialfox we just use a cubic-bezier function to make the transition. It does not replicate, not remotely close, the transitions on chromium where it hovers fast, and then slowly release back to the default color.

I figured we could implement the hover effect like how chromium devs did in css.

(please add this I'm begging, willing to contribute btw)

2025-10-18-17-09-35.mp4

Additional info (Optional)

No response