How can scale in positive x direction only?

Question

I'm new to animation.and I using scalex() to animate My div area but which produce the scaling in both direction onclick on corresponding div.I'm added a snippet below.

document.getElementById("match").addEventListener("click",function(){
    document.getElementById("match").classList.add("anim");
});

#match{
 height:100px;
  width:100px;
  background-color:red;
  }

.anim{
    animation : scale 5s linear 1;
}

@keyframes scale{
    0%{
        transform: scaleX(1);
    }
    50%{
      transform: scaleX(1.5);
    }
    100%{
        transform: scaleX(2);
    }
}

<div id="match"> </div>

On the the above code I'm trying to achieve a div area which is scaling only on positive x-direction.How to achieve it?

Answer 1

Set the transform-origin value as left so that the left edge of the box remains fixed.

document.getElementById("match").addEventListener("click", function() {
  document.getElementById("match").classList.add("anim");
});

#match {
  height: 100px;
  width: 100px;
  background-color: red;
}
.anim {
  animation: scale 5s linear 1;
  transform-origin: left;
}
@keyframes scale {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.5);
  }
  100% {
    transform: scaleX(2);
  }
}

<div id="match"></div>