html - Apply Css Animation to a class with onclick Using JavaScript -

i have script :

function ani(){     document.getelementbyid('para').classname ='exeinputapparition'; } 

to apply css animation on element has id para. it's working wanted know if it's possible apply element have class para instead of id because have more 1 element need apply css animation. in advance :)

the css :

@keyframes inputapparition {     0%        {         opacity: 0;      }     100%      {          opacity: 1;      }  } .exeinputapparition {     animation-name: inputapparition;          animation-duration: 0.5s;         animation-fill-mode: forwards; } #para  {     margin: 0;     font-family: "roboto"     font-size: 20px;      opacity: 0;  } 

the function queryselectorall returns elements, it's "dom array", therefore there isn't attribute classname. should loop list , change 1 one:

var allelementspara = document.queryselectorall(".para");  (var = allelementspara.length - 1; >= 0; i--) {     allelementspara.item(i).classlist.add("exeinputapparition"); };