Переход нескольких фильтров

Question

Я использую свойство 2 фильтра, чтобы изображение стало белым при наведении.

.uni-im img {
    filter: brightness(0) invert(1);
}

Я хочу использовать переход для плавного просмотра.

.uni-im img {
    filter: brightness(0) invert(1);
    transition: filter .15s linear;
}

Но этот переход выполняется для обоих свойств. Я имею в виду переход для яркости и другой переход для инвертирования.
Я хочу стать белым напрямую , не видя чёрного изображения. Это возможно с чистым CSS?

Пример:

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 2s linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 2s linear;
}

div:hover {
  background: #3F85CE;
}
div:hover img {
  filter: brightness(0) invert(1);
}

<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA3WAAAN1gGQb3mcAAAAB3RJTUUH4gsGEwwX9OWpBgAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAC00lEQVR4Xu2Z3UrEMBCFqyirq/iHLKggeCe6CuKFPzeuLIpXXqh4Iejb+Hq+ks7USZ3NJmltNqWrpxDczaYz53ydpGnNMhwgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAKlBJau3j8+29hI+VKp+pgBbTTt0hTjMXiuSZYsQWTgWH37lP+Y2hG1Q2oH1LhvxejiBPS5G6kz5eld0WhysHb2wF7YE3tjj9xXHGe/Ke2U6icR+zdeclhC7FmSb6oy0gvKnuqfn4TQRDHmlc49laNYuKlvk/uLcQJgRgvyzKW52DmWyHQRVumbq+BnRleArW1ZwGxbPxxJ/0iC1MYqxs8vkMxzfcq29C/bcUIAfkrEOkuCvVQU1dgwX3WGqjYIgJTviNlVy8WNtdI2ZjKUyGN0VbTuuM4tA2AWyCdn6WTZSSucf4s4cV2UsjWrFAAFfq0TuGkwdcrf3AnMVfZp7nnKvVXTQDTeeCq15zNXpQI6rtskBTx3gOE7xjW1e2ov5qpM6i/HlNicY+TuJFrOLaPft7ks68QAWPNUwGUdYyTkjdoDtVtql9R4W8qNP3Mf//ZWMzbHGDlE+1oMgFMLwIZLHCXoU5v1JUrQz7n6Hi0bJp9oP60NQC0u+S1Rfd9KYCo25JalsdBcF8DYiw977sUqTnR+vvOzYDhflAQXQSvAbiKxKcPuWh7GcoUAXMj8GaZU2FDsoXi5cC6SnlWex643JLCJNE4vugLyZ+R/duTvPrxPfX8dhrqjZQOZBo9kuo3P+ZO+FuzxUTwPTPCHOruvaT6HjPOuc+Tg3RW/PTUVwVtTJnSnyoW/t74pvXei91ZdcfYY3rXK4AUauKiCNbnVjS37WaV7kYItBO5247lk8PqUmjeGNITcS2Wq1g5qmq782LQu2w36oPDe2fsUVZlkewayl7T/OG2PVygBARAAARAAARAAARAAARAAARAAARAAgTCBLwkq2jFKY/W7AAAAAElFTkSuQmCC">
</div>

Answer 1

Чтобы было легче увидеть эффект, я создал новый фрагмент, в котором цвет изображения вместо фона.

Но он будет работать так же для вашего случая использования.

Просто измените фильтры, которые вы применяете

.test {
  width: 200px;
  height: 150px;
  background: cyan;
  margin: 20px;
  transition: filter 4s;
}

.test:hover {
  filter:  grayscale(1) brightness(1.5);
}

<div class="test"></div>

Answer 2

Для предоставленного вами кодового ручки установлен переход 2s. Если вы сократите время перехода, то не увидите черного.

Ex.

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 100ms linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 100ms linear;
}

Вы также можете удалить переход с вашего изображения. Таким образом, у вас будет фоновый переход в течение 0,15 с из белого в синий, но изображение переключится непосредственно с синего на белый без перехода сначала к черному.