Removes required "to" keyframes in animation

[SethFalco]

Describe the bug
When an SVG has key frames with to, svgo will remove them, which changes the animation.

This can be caused with the following SVG:

<svg width="48" height="48" viewBox="0 0 12.7 12.7" xmlns="http://www.w3.org/2000/svg"><style>@keyframes a{0%,to{clip-path:inset(84%0 0)}4%,96%{clip-path:inset(74%0 0)}16%,52%,84%{clip-path:inset(16%0 0)}20%,48%{clip-path:inset(19%0 0)}24%,44%{clip-path:inset(26%0 0)}28%,64%,72%{clip-path:inset(29%0 0)}32%{clip-path:inset(45%0 0)}36%,40%{clip-path:inset(35%0 0)}60%,76%{clip-path:inset(23%0 0)}68%{clip-path:inset(32%0 0)}}@keyframes b{0%,32%,40%,68%,to{clip-path:inset(13%0 0)}4%{clip-path:inset(20%0 0)}76%,8%{clip-path:inset(23%0 0)}16%,84%{clip-path:inset(29%0 0)}28%,72%,96%{clip-path:inset(19%0 0)}36%{clip-path:inset(16%0 0)}48%{clip-path:inset(45%0 0)}52%{clip-path:inset(58%0 0)}56%{clip-path:inset(48%0 0)}60%{clip-path:inset(35%0 0)}64%,92%{clip-path:inset(26%0 0)}88%{clip-path:inset(39%0 0)}}@keyframes c{0%,to{clip-path:inset(52%0 0)}16%{clip-path:inset(0 0 0)}20%,84%{clip-path:inset(10%0 0)}24%,52%{clip-path:inset(26%0 0)}28%{clip-path:inset(39%0 0)}32%,44%{clip-path:inset(48%0 0)}36%{clip-path:inset(55%0 0)}40%{clip-path:inset(68%0 0)}48%,92%{clip-path:inset(32%0 0)}56%{clip-path:inset(16%0 0)}60%,76%,88%{clip-path:inset(23%0 0)}68%{clip-path:inset(29%0 0)}72%{clip-path:inset(35%0 0)}80%{clip-path:inset(13%0 0)}}</style><path d="M2.117 2.249h2.38v8.202h-2.38z" fill="#FFF" style="animation:a 1.25s linear infinite"/><path d="M5.292 2.249h2.38v8.202h-2.38z" fill="#FFF" style="animation:b 1.25s linear infinite"/><path d="M8.467 2.249h2.38v8.202h-2.38z" fill="#FFF" style="animation:c 1.25s linear infinite"/></svg>

To Reproduce
Steps to reproduce the behavior:

1. Download the SVG locally. (Open it in a browser so you know how it normally looks.)
2. Run svgo to optimize it, which will remove the to frames in the animation.
3. Open the result in the browser, and notice the animation flickers.

Expected behavior
The to frames should be preserved.

For example: 0%,to{clip-path:inset(84%0 0)}, should not become 0%{clip-path:inset(84%0 0)}.

Desktop (please complete the following information):

• SVGO Version: 2.8.0
• NodeJs Version: 16.13.1
• OS: Debian 11

---

I'm looking further into this over time to see if I can open a PR myself.
The issue is caused by the minifyStyles plugin, the actual bug is upstream in CSSO, one of the dependencies.

I'll open an issue there as well with an MRE.

[SethFalco]

I believe this issue has been fixed in CSSO.
As soon as it's released and the dependency is updated here, I can test it and close this issue if it's resolved.

css/csso@d0eecfb

[fritzmg]

Weirdly, for me the issue only occurs when using 0% and 100%, but doesn't if I use from and to.

[SethFalco]

Closing this as resolved! 🎉
Opened a PR against it anyway to add a test, but no need to keep this open.