是否可以使用transform：scaleX（）而不会影响边界半径？

Question

我正在尝试生成一个简单的扩展栏动画。一切正常，我可以按自己的喜好进行控制，但受border-radius转换影响的scaleX()除外。有没有办法避免这种影响？

我假设对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 />

我正在尝试生成一个简单的扩展栏动画。一切正常，我可以按自己的喜好进行控制，但受scaleX（）转换影响的边界半径不断变化。 ...

Answer 1

我想使用scaleX（）而不是使用width属性，因为我正在处理的元素具有各种变化的宽度，并且我希望只有一个动画才能使用它们。