White Maskers White Maskers - 19 days ago 6
CSS Question

How can scale in positive x direction only?

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

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>