Is it possible to use transform: scaleX() without affecting the border-radius?

问题

I am trying to generate a simple expanding bar animation. Everything works find and I control it to my liking, except for the changing border-radius which is affected by the scaleX() transformation. Is there a way to avoid this effect?

I assumed using an absolute unit for border-radius would suffice but it doesn't. scaleX() still affects it.

Important note:

I want to use scaleX() rather than working with the width property because the elements i am working on come with various changing widths and I want to have only one animation to work with them all.

div {
  width: 200px;
  height: 20px;
  background-color: pink;
  border-radius: 10px;
  animation: expand;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  from {
    transform: scaleX(0.1);
  }
  to {
    transform: scaleX(1);
  }
}

<div />

回答1:

I want to use scaleX() rather than working with the width property because the elements i am working on come with various changing widths and I want to have only one animation to work with them all.

Don't specify the to and your animation will work with any width:

.bar {
  width: 200px;
  height: 20px;
  background-color: pink;
  border-radius: 10px;
  animation: expand;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  from {
    width:20px;
  }
}

<div class="bar"></div>

<div class="bar" style="width:100px"></div>
<div class="bar" style="width:40px"></div>

来源：https://stackoverflow.com/questions/59772063/is-it-possible-to-use-transform-scalex-without-affecting-the-border-radius