css - 是否可以使用转换 : scaleX() without affecting the border-radius?

Question

我正在尝试生成一个简单的扩展条动画。除了受 scaleX() 转换影响的不断变化的 border-radius 外，一切正常，我可以根据自己的喜好控制它。有没有办法避免这种影响？

我假设为 border-radius 使用绝对单位就足够了，但事实并非如此。 scaleX() 仍然影响它。

重要提示:

我想使用 scaleX() 而不是使用 width 属性，因为我正在处理的元素具有各种变化的宽度，而我只想有一个动画与他们一起工作。

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 />

Answer 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.

不要指定 to，您的动画将适用于任何宽度:

.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>