CSSのfilterのhue-rotateを使い画像をフラッシュさせる場合、途中の色を経由せず元の色に戻したい

前提・実現したいこと

発生している問題・エラーメッセージ

下記CSSで画像を青色にフラッシュさせることが出来ますが、hue-rotateが元の色（360）に徐々に変化していくため、青→緑→黄色→元の色というようにカラフルに変化してしまいます。

カラフルに変化させず、青→元の色に戻したいです
どなたか方法をご存じの方がいましたら教えていただけるとありがたいです

該当のソースコード

css
1@keyframes fadeIn {
2  0% {
3    opacity: 0;
4    transform: translateY(100px);
5  }
6  100% {
7    filter: invert(8%) sepia(99%) saturate(7044%) hue-rotate(247deg) brightness(100%) contrast(145%);
8  }
9}

行動規範の内容に同意します

回答1件

どのようにしたいのかよくわからないのですが、hue-rotateをアニメーションしたくないということであれば、始点と終点を同値にしておけばいいのではないかと思います。

css
1@keyframes fadeIn {
2  0% {
3    opacity: 0;
4    transform: translateY(100px);
5    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(247deg) brightness(0%) contrast(0%);
6  }
7  100% {
8    filter: invert(8%) sepia(99%) saturate(7044%) hue-rotate(247deg) brightness(100%) contrast(145%);
9  }
10}