使用 transform 属性为 div 的宽度设置动画

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> <a href="#">Help?</a> </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> <a href="#">Help?</a> </div> </div>