CSS预加载器transform:scale缩放动画失效问题求助

问题根源 #

1. 动画类未绑定目标元素：你定义了.preloader-img动画类，但没有将其应用到承载背景图的section元素上，导致动画根本没触发。
2. Transform属性冲突：即使绑定了类，元素本身的transform: translate(-50%, -50%)会被动画中的transform: scale覆盖，导致元素失去居中定位，缩放效果也会异常。

修正方案 #

方案一：合并Transform属性（保留原定位方式） #

给目标元素绑定动画类，并在关键帧中同时保留居中定位和缩放属性，避免覆盖：

#preloader{
    background: black;
    background-repeat:no-repeat;
    background-size: cover;
    background-position:center;
    width:100%;
    height:100%;
    z-index:20;
    opacity:1;
    position:fixed;
}
#preloader>section{
    position:absolute;
    height:250px;
    width:300px;
    top:50%;
    left:50%;
    background:url('/img/cropped-Dark-roads-no-more-300x151-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: center;
    /* 绑定动画 */
    animation:zoomlight 1s ease-in-out infinite;
}
@keyframes zoomlight{
    0%{
        opacity:0.3;
        /* 同时保留居中定位和初始缩放 */
        transform: translate(-50%, -50%) scale(1);
    }
    50%{
        opacity:1;
        filter:drop-shadow(1em 1em 2em white);
        /* 中间状态放大到1.2倍（可自行调整数值） */
        transform: translate(-50%, -50%) scale(1.2);
    }
    100%{
        opacity:0.3;
        /* 回到初始状态 */
        transform: translate(-50%, -50%) scale(1);
    }
}

方案二：使用Flex布局居中（更简洁，避免属性冲突） #

将预加载器容器设为Flex布局负责居中，让子元素只处理缩放动画：

#preloader{
    background: black;
    background-repeat:no-repeat;
    background-size: cover;
    background-position:center;
    width:100%;
    height:100%;
    z-index:20;
    opacity:1;
    position:fixed;
    /* Flex布局实现居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#preloader>section{
    height:250px;
    width:300px;
    background:url('/img/cropped-Dark-roads-no-more-300x151-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: center;
    animation:zoomlight 1s ease-in-out infinite;
}
@keyframes zoomlight{
    0%{
        opacity:0.3;
        transform: scale(1);
    }
    50%{
        opacity:1;
        filter:drop-shadow(1em 1em 2em white);
        transform: scale(1.2);
    }
    100%{
        opacity:0.3;
        transform: scale(1);
    }
}

额外说明 #

• 缩放倍数可根据需求调整，scale(0.8)为缩小，scale(1.5)为放大
• ease-in-out参数保证动画前后过渡平滑

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