是否可以在不影响边界半径的情况下使用 transform: scaleX() ？

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>

是否可以在不影响边界半径的情况下使用 transform: scaleX() ？

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

css

css-transforms

css-animations