Animate CSS filter functions grayscale, invert, opacity or sepia. Use a bezier timing function that gives progress > 1. https://jsfiddle.net/ericwilligers/bes3uyxz/ Or proposed WPT css/filter-effects/animation/filter-interpolation-004.html in https://github.com/web-platform-tests/wpt/pull/17030/ Actual results: grayscale(1.5) invert(1.5) opacity(1.5) sepia(1.5) Expected results: grayscale(1) invert(1) opacity(1) sepia(1) Equivalent Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1557563 Note also that negative animation results are not clamped. None of the following should occur: blur(-10px) brightness(-1) contrast(-1) grayscale(-1) invert(-1) opacity(-1) saturate(-1) https://jsfiddle.net/ericwilligers/t3pmqbd1/
<rdar://problem/51511977>
https://wpt.fyi/results/css/filter-effects/animation/filter-interpolation-004.html?label=master&label=experimental&aligned shows the above mentioned WPT test passing, so closing this out.