如何实现Div宽度从100%动画缩至40%且不溢出、内容留存？

直接调整动画目标为元素宽度，替代原来的left属性移动，就能避免溢出问题，同时保证内容始终在容器内。修改后的代码如下：

修改后的CSS代码 #

.redbox{
    width: 100%;
    background-color: red;
    height: 100px;
    animation-name: shrinkBox; /* 重命名动画更直观 */
    animation-duration: 5s;
    position: relative;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    overflow: hidden; /* 确保内容不会超出容器 */
    box-sizing: border-box; /* 可选：避免padding/border导致宽度计算偏差 */
}

@keyframes shrinkBox{
    0%{
        width: 100%; /* 初始宽度占满屏幕 */
    }
    100%{
        width: 40%; /* 最终宽度固定为40% */
    }
}

对应的HTML代码 #

<!DOCTYPE HTML>
<html>
<head>
    <style>
        /* 将上面的CSS代码粘贴到这里 */
    </style>
</head>
<body>
    <div class="redbox">hello</div>
</body>
</html>

关键修改说明 #

• 替换动画逻辑：把原来移动left的操作改成调整width，元素从全屏宽度收缩到40%，全程不会超出屏幕范围。
• 保留overflow: hidden：确保容器内的内容不会随着宽度收缩而溢出到外部。
• 可选box-sizing: border-box：如果后续给容器加内边距或边框，这个属性能让宽度计算包含这些样式，避免意外溢出。
• 动画命名优化：把movereverse改成shrinkBox，更贴合当前收缩宽度的动画效果。

内容的提问来源于stack exchange，提问作者user19251251