[YouTube Super Fast Chat] [Record Purpose] Waiting Firefox to support `@property`

[cyfung1031]

CodePen - Down the Rabbit Hole (with Web Animations API)

@property --ticker-rtime {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@keyFrames tickerAnimation {
    0% {
        --ticker-rtime: 40%;
    }
    100% {
        --ticker-rtime: 60%;
    }
}

[class] {
    --ticker-c1:rgba(144, 0, 0, 0.07);
    --ticker-c2:rgba(155, 0, 0, 0.06);
    animation: tickerAnimation 3ms forwards;
    --ticker-dtime:50%;    

/* OK in FF */

/*    background:linear-gradient(90deg, var(--ticker-c1),var(--ticker-c1) var(--ticker-dtime),var(--ticker-c2) var(--ticker-dtime),var(--ticker-c2)) !important; */

/* NG in FF */

/*    background:linear-gradient(90deg, var(--ticker-c1),var(--ticker-c1) var(--ticker-rtime),var(--ticker-c2) var(--ticker-rtime),var(--ticker-c2)) !important; */
}

---

Added detection code in v0.23.8 to avoid using in Firefox 116 Stable.

Details see: https://stackoverflow.com/questions/69612853/using-css-can-i-check-if-a-browser-supports-the-css-properties-and-values-api/76937664#76937664

jsFiddle: https://jsfiddle.net/lunarlogic489/xtb8que7/6/