Почему не получается анимировать svg?

Question

[Андрей Иванов]

<div class="scroll-icon-bottom">
					<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="11.6682mm" height="16.4308mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
					viewBox="0 0 191 269"
					 xmlns:xlink="http://www.w3.org/1999/xlink">
					 <g id="Слой_x0020_1">
					  <rect class="fil0 str0" x="3" y="3" width="184" height="262" rx="92" ry="92"/>
					  <path class="fil1" d="M128 162l0 0 0 0 0 0 0 0c1,1 1,1 1,2 0,1 0,2 -1,2l0 0 0 0 -31 31c0,0 -1,1 -1,1l0 0c0,0 -1,0 -1,0 0,0 -1,0 -1,0 0,0 -1,0 -1,-1l-31 -31 0 0 0 0c-1,-1 -1,-1 -1,-2 0,-1 0,-2 1,-2l0 0 0 0c1,-1 1,-1 2,-1 1,0 2,0 2,1l0 0 0 0 29 29 28 -29 0 0 0 0c1,-1 1,-1 2,-1 1,0 2,0 2,1l0 0z"/>
					  <path class="fil1" d="M128 190l0 0 0 0 0 0 0 0c1,1 1,1 1,2 0,1 0,2 -1,2l0 0 0 0 -31 31c0,0 -1,1 -1,1l0 0c0,0 -1,0 -1,0 0,0 -1,0 -1,0 0,0 -1,0 -1,-1l-31 -31 0 0 0 0c-1,-1 -1,-1 -1,-2 0,-1 0,-2 1,-2l0 0 0 0c1,-1 1,-1 2,-1 1,0 2,0 2,1l0 0 0 0 29 29 28 -29 0 0 0 0c1,-1 1,-1 2,-1 1,0 2,0 2,1l0 0z"/>
					 </g>
					</svg>
				</div>

.scroll-icon-bottom
		position: absolute
		z-index: 1
		left: 50%
		transform: translateX(-50%)
		animation: scroll  2s infinite ease-in-out
		&:hover
			cursor: pointer
		.fil0
			fill: #9ed4ea
			stroke: #9ed4ea
			stroke-width: 6.9207
		.fil1
			fill: #fff
			animation: arr  2s infinite ease-in-out
@keyframes scroll
	0%, 100%
		top: 760px
		opacity: 1
	50%
		top: 770px
		opacity: 0.68
@keyframes arr
	0%, 100%
		top: 760px
	50%
		top: 750px

Хочу на класс fil1 сделать анимацию что бы вверх на 10px подымались стрелочки

skrinshoter.ru/v/100918/aKr6qMhD

Answer 1

[Максим]

анимировать его можно на js т.е не hover а mouseover

Answer 2

[lagudal]

Можно без js, только надо анимировать элемент svg - в вашем случае это координаты path, a не top etc.
Как вариант - ваши 2 стрелки в один связанный контур, его координаты стандарт и по hover, анимировать ваш класс fil1 как следующий элемент по + предыдущего селектора fil0.
Единственное еще, измените свои стрелки, такое чувство, что у вас обрисованные тяп ляп из растра - у font awesome можно взять четкие. Иначе анимация возможно будет скачком, а не плавно.
https://codepen.io/lagudal/pen/oPpOQm

Answer 3

[Дмитрий Христоев]

https://greensock.com/svg-tips

А это видео почему https://www.youtube.com/watch?v=xxZzGOBkDP8