Closed cyfung1031 closed 11 months ago
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/
CodePen - Down the Rabbit Hole (with Web Animations API)
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/