在动画期间更改变换原点

Question

我正在尝试调整一个部分的大小，先按左侧缩放，然后按右侧缩放

我当时想，只需在第一步的末尾添加transform-origin就可以解决问题，但是由于某些原因，这是行不通的。 似乎在动画达到50％之前更改了原点

我在哪里错了？

谢谢

.black-section{

    transform: scaleX(1);
    transform-origin: right;

    display: block;
    float: right;
    width: 35%;
    height: 100%;
    background-color: #565656;

}

.resize{
    animation: slide-in 1s ease-in forwards;
}


@keyframes slide-in{
    50%{

        transform: scaleX(2.857);
    }
    100%{
        transform: scaleX(1);
    }
}