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

<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