Replacing dynamic % width with scaleX + translateX - css

Question

I am currently transitioning the width property of an element. I would like to replace this with transitions on scaleX and translateX for better rendering performance.
I'm struggling to come up with a proper 1:1 conversion between the two concepts.
Below is a box which contains two lines. Each line has a bar inside of it. The first bar is created using width. The second bar is created using scaleX and translateX. The second bar breaks out of the box. It should appear identical to the width bar for all possible values.
Is this an appropriate way to tackle this problem? If not, how should I approach it? If so, I have some concerns:
I feel like I shouldn't have to use 1% width. I thought I could say 1px and scale that, but maybe that isn't the right idea.
I'm unclear if I should use 1% width and scale up, or 100% width and scale down. Perhaps they're equivalent, but the width of the bar controls the positioning of translateX
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6) translateX(33%);
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>

Answer 1

It's simpler than all that. You're already scaling the element to 66%. Now all you need to do is set the origin to the far left of the element with transform-origin: 0 50%; and drop the translate rule. That should fix the issue.
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6);
transform-origin: 0 50%;
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>