Как сделать таймер при состоянии :hover у SVG?

Question

[schumacher_lalune]

Имеется иконка SVG:

<svg id="VK_icon" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
	<g class="changeSVG">
		<path d="M52 0H0V52H52V0Z" fill="var(--color-svg_1)"/>
		<path d="M13.4708 15.8249C14.717 18.9024 16.2965 21.8041 18.3767 24.4089C18.6526 24.7556 19.0003 25.0637 19.3667 25.3147C19.9019 25.6822 20.4068 25.553 20.6244 24.9409C20.8545 24.2985 21.0657 22.9966 21.0783 22.322C21.1126 20.5593 21.0731 19.4042 20.9784 17.6437C20.917 16.5161 20.5162 15.526 18.8576 15.2272C18.3454 15.1345 18.2978 14.7129 18.6269 14.2924C19.312 13.4167 20.2663 13.2772 21.3012 13.222C22.9785 13.1314 24.662 13.2053 26.3413 13.222C27.0254 13.2282 27.7135 13.2834 28.3872 13.4302C29.2659 13.6218 29.7365 14.2382 29.8813 15.096C29.9562 15.5385 29.9948 15.9934 29.9843 16.4411C29.9406 18.3651 29.8479 20.2881 29.826 22.2111C29.8167 22.9659 29.8718 23.7395 30.0332 24.4745C30.2592 25.4989 30.9567 25.7561 31.6699 25.0159C32.5757 24.0759 33.3743 23.018 34.1238 21.9436C35.4856 19.9894 36.5027 17.8447 37.3784 15.6334C37.8312 14.4924 38.178 14.2446 39.4054 14.2415C41.7125 14.2362 44.0197 14.2342 46.3268 14.2415C46.736 14.2435 47.1639 14.2821 47.5501 14.405C48.1769 14.6049 48.4257 15.1161 48.2789 15.7647C47.9364 17.2848 47.1149 18.5768 46.2352 19.8189C44.8234 21.8116 43.344 23.7565 41.899 25.7262C41.7147 25.9771 41.5523 26.2447 41.4013 26.5164C40.8609 27.493 40.8984 28.0406 41.6865 28.8537C42.9411 30.1478 44.2842 31.3586 45.4991 32.6881C46.3821 33.6553 47.1993 34.7047 47.8989 35.8094C48.7839 37.2065 48.2373 38.5225 46.584 38.7567C45.544 38.9036 40.4635 38.7579 40.2009 38.7567C38.835 38.7506 37.6377 38.2768 36.6735 37.3492C35.6012 36.3164 34.6267 35.1836 33.597 34.106C33.2868 33.7812 32.9556 33.4699 32.5986 33.1981C31.7563 32.5557 30.9296 32.6984 30.5361 33.6875C30.1998 34.5371 29.9093 36.7682 29.8957 36.9587C29.825 37.955 29.1909 38.5901 28.0748 38.6515C24.8525 38.8265 21.7301 38.4673 18.8213 36.9087C16.3559 35.5886 14.3872 33.7218 12.6818 31.5449C9.97278 28.0871 7.83302 24.2863 5.87948 20.3738C5.77964 20.1738 3.80099 15.9634 3.74782 15.7645C3.57107 15.0986 3.73595 14.4625 4.29859 14.2435C4.64934 14.1071 11.173 14.2431 11.2815 14.2489C12.3225 14.3053 13.0323 14.7444 13.4708 15.8249Z" fill="var(--color-svg_2)"/>
	</g>
</svg>

И изменение цвета иконки при наведении:

.changeSVG {
    --color-svg_1: #9CA5B2;
    --color-svg_2: #FCFAF9;
}

.changeSVG:hover {
    --color-svg_1: #3A4B65;
}

Можно ли задать таймер псевдоклассу :hover, если в теге svg были заданы css-переменные, принимающие разные значения в зависимости от состояния?

Answer 1

[Никита Михайлов]

Можно использовать анимацию и установить задержку через animation-delay