Анимации, запускаемые событиями HTML, которые происходят с другим элементом HTML. ⇐ CSS

[Anonymous]

Как создать анимацию значка, которая воспроизводится только при наведении курсора на другой элемент?
Я делаю тупой проект, чтобы лучше понимать HTML, CSS и JavaScript (я Я новичок).
Мне хотелось, чтобы стрелки плавно перемещались справа налево и наоборот по циклу при наведении курсора на ссылку, на которую они указывают.
Мой HTML для этой части выглядит примерно так:

Код: Выделить всё

[url=Something IDK.html]Another page[/url]





.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}

До сих пор я пытался использовать CCS для создания анимации, которая выглядит следующим образом:

Код: Выделить всё

@keyframes arrowTransition{
from {transform: translateX(0%);}
to {transform: translateX(-20%);}
}

.linkHeader:hover .arrowIconHeader{
animation-name: arrowTransition;
animation-duration: 2s;
animation-direction: alternate;
animation-duration: infinite;
}

Но мне не повезло с этим методом, поэтому я попробовал с помощью JavaScript написать следующий код:

Код: Выделить всё

const linkHeader = document.getElementsByClassName('linkHeader')
const arrowIconHeader = document.getElementsByClassName('arrowIconHeader')

function arrowAnimation(a) {
a.animate(
[{transform:'translateX(0px)'},{transform:'translateX(-20px)'}],
{duration:2000,iterations: Infinity,}
)
}

linkHeader.addEventListener('onmouseover',()=>{arrowAnimation(arrowIconHeader)})

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

Подробнее здесь: https://stackoverflow.com/questions/785 ... ml-element