для маркера checkbox навешен transition для плавного появления
Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.
Но если приспичило, можно:
Первый вариант
1. Описать галку в начале файла:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
<defs>
<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
<path fill="currentColor" … />
</symbol>
</defs>
</svg>
2. Вставить в кнопку:
<svg width="32" height="32"><use href="#checkmark"></use></svg>
3. Анимировать прозрачность.
Второй вариант
Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:
@property --my-color-1
{
syntax: '<color>';
initial-value: #000;
inherits: false;
}
