I'm trying to start a simple animation on an svg element in HTML, but the effect doesn't work.

I want to add this:

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

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

to this,

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;
}

with this,

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");
}