为什么我的CSS滑动动画仅执行一半就无过渡直接跳转至终点？

问题根源 #

你遇到的动画跳转问题主要有3个核心原因：

• 动画未配置结束状态保留规则：animation属性默认的animation-fill-mode为none，动画执行完成后元素会直接回到动画触发前的原始样式，不会保留100%关键帧的配置
• 绝对定位缺少基准和默认值：.containerClass设置了position: absolute但父元素body没有配置position: relative，且你没有给容器设置默认的bottom属性，动画结束后回到bottom: auto的默认状态就会出现跳位
• 动画属性选择不合理：用bottom做位移动画会频繁触发浏览器重排，元素高度较大时容易出现卡顿、跳帧的观感

修复方案 #

你可以直接替换以下修改后的CSS代码：

body{
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f5f6;
    padding-left: 100px;
    padding-right: 100px;
    /* 新增：给绝对定位子元素提供定位基准 */
    position: relative;
    min-height: 100vh;
    margin: 0;
}

.class-image{
    width: 100%;
    height: 500px;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px 10px 0px 0px;
    object-position: 30% 60%;
    display: block;

}

.colorChange{
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.containerClass{
    padding: 16px;
    vertical-align: middle;
    /* 修改：添加forwards保留动画结束状态，改用transform做动画性能更好 */
    animation: example 2s linear forwards;
    width:85%;
    position:absolute;
    /* 新增：初始定位和动画结束状态对齐，数值可调整匹配导航栏高度 */
    top: calc(100px + 2rem);
}

.navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px; /* 固定导航栏高度方便子元素定位对齐 */
    }

    a{
        color: #831D17;
        text-decoration: none;
        margin-left: 16px;
        font-weight: 700;
    }

    a:hover{
        font-weight:bolder;
        color: white;
        padding-left: 8px;
        padding-right: 8px;
        display: inline-block;
        line-height: 200%;
        font-size: 16px;
        border-radius: 20px;

        background-color: #333333;
        text-decoration: none;
    }

    /* 修改：改用transform实现位移，不会触发重排，动画更流畅 */
    @keyframes example {
            0% {
                transform: translateY(-100%);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }            
        }         

    .highlight{
        color: black;
        font-weight: bolder;
        font-size: 48px;
    }

    .Fotoind{
        background-color:#333333;
        color: #D6D6D6;
        font-weight: 600;
        border-radius: 0px 0px 10px 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 16px;
    }

    .MapsContainer{
        margin-top: 16px;
        width: 100%; border-radius: 10px; overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        display: flex;
        justify-content:space-between ;
    }

    .maps-right{
        background-color:#333333;
        color: #D6D6D6;
        font-weight: 600;
        border-radius: 0px 0px 0px 0px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 16px;
        margin-left: 16px;
        width: 30%;
    }

    .mapStyle{
        border: 0;
        height: 350px;
        width: 70%;
    }

    .contentdown{
        padding: 8px;
    }

    .legal{
        margin-right: 16px;
    }

额外优化建议 #

• 类名命名可以统一采用小写+短横线的格式，比如container-class、foto-ind，符合CSS通用命名规范，可读性更强
• 固定导航栏高度可以避免页面内容加载时出现布局偏移，也方便绝对定位元素对齐
• 简单位移动画优先使用transform属性实现，浏览器会启用GPU加速，流畅度远高于top/right/bottom/left定位属性

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