Estoy tratando de iniciar una animación simple en un elemento svg en HTML, pero el efecto no funciona.

Quiero agregar esto:

 .arrow-behind { -webkit-transform: translateY(-15px); transform: translateY(-15px); } .arrow-front { -webkit-transform: translateY(15px); transform: translateY(15px); }

a esto,

HTML:

 <div class="content"> <p>Hover me !</p> <svg id="more-arrows"> <polygon points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/> <polygon points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/> </svg> </div>

CSS:

 #more-arrows { width: 75px; height: 85px; } #more-arrows polygon { fill: #FFF; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; }

con este,

JS:

 clicked = document.getElementById("more-arrows"); clicked.addEventListener("click", opened) function opened() { addclass = document.getElementsByClassName("polygon") addclass.setAttribute("class", "arrow-behind"); addclass.setAttribute("class", "arrow-front"); }