How to animate a div through the left side without loosing its content?-CodePudding

.redbox{
    width: 100%;
    background-color: red;
    height: 100px;
    animation-name: movereverse;
    animation-duration: 5s;
    position: relative;
    animation-fill-mode:forwards;
    animation-direction:normal;
    animation-timing-function: ease-in;
    overflow: hidden;
}

@keyframes movereverse{
    0%{
     left: 0;   
    }

    25%{
       left:250px;
    }
    50%{
        
    }
}

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div >hello</div>
</body>
</html>

I want to reduce the width of the red box to a certain width through animation. let say, I want to fix the width to 40% but want to show it with the help of animation. I used left property, but it is overflowing through my screen. Is there any way to fix the width to 100 percent and then apply the animation so it does not get overflow and the content remains inside the div.

CodePudding user response：

I think this is what you are looking for but I cannot be sure for sure because I read your question like couple of times and still kind of doesn't make sense

Here:

@keyframes movereverse{
    0%{
        width: 100%;
        left: 0;  
    }

    100%{
        width: 40%;
        left: 60%;
    }
}

CodePudding user response：

Try by take redbox div within other div. And apply style on other div. Both divs (redbox and other) should have position relative. Maybe it will work.