Animating Transform Scale via Javascript

Question

So, I'm animating a SVG button and I want to animate transform property combined with a fadeout with opacity attributes via Javascript.

The code would look like something like this: (Considering it's coming with opacity 0 and scale 0)

(I know the way I'm doing it it's incorrect because it's overriding till last set attribute)

    function hiA(){
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("transform", "scale(.5)");
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("opacity", "1");
    }

And the same but in reverse: (Considering it's coming with opacity 1 and scale 1)

    function byeA(){
        pathA.setAttribute("transform", "scale(.5)");
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("transform", "scale(0)");
        pathA.setAttribute("opacity", "0");
    }

I don't know if it's possible or if it's better to add a class with the animation on CSS.

Answer 1

you can set class and style in css: https://www.w3schools.com/css/css3_animations.asp

JS:

 pathA.className+="hiA"

CSS:

@keyframes example {
    0%   {transform:scale(1);}
    50%  {transform:scale(.5)}
    100% {transform:scale(1);opacity:1;}
}


.hiA{
    animation: example 1s;
}

See example:

 function hiA(){
 var pathA=document.getElementById("pathA");
  pathA.className="hiA";
  setTimeout(function(){ pathA.className=""; }, 3000);
 }

@keyframes example {
   0%   {transform:scale(.5);}
   50%  {transform:scale(1);}
   100% {transform:scale(0);}
}
    
    
.hiA{
    animation: example 3s;
}

<button onclick="hiA()" id="pathA">animation me</button>

ED