Animating a div's width with transform property - html

Question

Basically, I want my div to show from left to right by altering it's width. But when transform: translate(-50%,-50%); is present, the div's width animates from it's center to the assigned position.
I can't really change the position to anything but absolute since the div is placed in a specific spot.
.Container{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 150px;
animation: Animate 3s forwards;
}
.Container:after{
content: '';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 150px;
background-color: rgb(110, 110, 110);
transform: skew(-35deg);
transform-origin: 100% 0;
z-index: 99;
}
#keyframes Animate{
from{
width: 0px;
}
to{
width: 250px;
background-color: red;
}
}
<div class="Container">
<div class="projDescription">
<h2>Hi</h2>
<p>Hello</p>
<br>
Help?
</div>
</div>
Would it be better if I used Jquery instead?
Also, I'll ask this here too since it has to do with the same div; can I animate the :after pseudo element? It's mostly just there to give the div an angled style, and I know I could've just used something else to style it. But I was just curious if it is possible.

Answer 1

Just remove the transform property from your .Container class and use calc() if you know the exact value of the width and height
.Container{
z-index: 100;
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 125px);
height: 150px;
animation: Animate 3s forwards;
}
.Container:after{
content:'';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 150px;
background-color: rgb(110, 110, 110);
transform: skew(-35deg);
transform-origin: 100% 0;
z-index: 99;
}
#keyframes Animate{
from{
width: 0px;
}
to{
width: 250px;
background-color: red;
}
}

Answer 2

I'd move some attributes to inner classes and made small modifications to achieve it; and also I used scale for width expansion animation instead of animation width property, to avoid an unnecessary reflow
.Container{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 250px;
height: 150px;
}
.projDescription{
height: 100%;
transform: scaleX(0);
position: absolute;
top: 0;
width:100% ;
animation: Animate 3s forwards;
}
.Container:after{
content: '';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 100%;
box-sizing: border-box;
background-color: rgb(110, 110, 110);
transform: skew(-35deg) translateX(-50%);
transform-origin: 100% 0;
z-index: 99;
animation: move 3s forwards;
}
#keyframes Animate{
to{
transform: scaleX(1);
background-color: red;
}
}
#keyframes move{
to{
transform: skew(-35deg) translateX(0%);
}
}
<div class="Container">
<div class="projDescription">
<h2>Hi</h2>
<p>Hello</p>
Help?
</div>
</div>