将图片放入div元素后CSS动画仍不生效，是什么原因？

问题根因 #

• CSS中left偏移属性仅对position为relative/absolute/fixed的元素生效，默认所有元素定位为static，因此你定义的horse动画修改left不会产生任何视觉效果，这是动画不生效的核心原因。
• 外层#track容器未设置高度，背景图无法正常渲染，也会干扰动画效果的观测。
• 直接使用div作为选择器过于宽泛，容易意外影响页面其他div元素，建议替换为更精准的选择器。

修复后代码 #

CSS 代码

#track{
    background: url(https://t4.ftcdn.net/jpg/02/79/76/03/240_F_279760385_TMIljsgKvdgTFjRfefxKIHhqAqd1qT39.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh; /* 新增：给轨道设置高度，正常显示背景 */
    position: relative; /* 新增：可作为子元素绝对定位的参照容器 */
}
/* 替换通用div选择器为更精准的范围选择器 */
#track .horsee div{
    position: relative; /* 新增：开启定位，让left属性修改生效 */
    display: flex;
    flex-flow: column;
    align-self: start;
    height: 20vh;
    width: 25vh;
    z-index: 2;
    animation-name: horse;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
#horse1{
    animation-timing-function: ease;
}
#horse2{
    animation-timing-function: ease-in;
}
#horse3{
    animation-timing-function: ease-out;
}
#horse4{
    animation-timing-function: step-end;
}
#horse5{
    animation-timing-function: linear;
}
@keyframes horse{
    0%{
        left: 0%;
    }
    80%{
        left: 80%;
    }
    100%{
        left: 0%; /* 可选新增：让动画循环更流畅，跑完自动回到起点 */
    }
}

HTML 代码（无需修改）

<section id="track">
    <section class="horsee">
        <div id="horse1"><img src="https://i.pinimg.com/originals/80/b9/f4/80b9f49b3131c76e567945dc9bd14166.gif" class="horsee" alt="horse1"></div>
        <div id="horse2"><img src="https://i.pinimg.com/originals/80/b9/f4/80b9f49b3131c76e567945dc9bd14166.gif" class="horsee" alt="horse2"></div>
        <div id="horse3"><img src="https://i.pinimg.com/originals/80/b9/f4/80b9f49b3131c76e567945dc9bd14166.gif" class="horsee" alt="horse3"></div>
        <div id="horse4"><img src="https://i.pinimg.com/originals/80/b9/f4/80b9f49b3131c76e567945dc9bd14166.gif" class="horsee" alt="horse4"></div>
        <div id="horse5"><img src="https://i.pinimg.com/originals/80/b9/f4/80b9f49b3131c76e567945dc9bd14166.gif" class="horsee" alt="horse5"></div>
    </section>
</section>

补充说明 #

如果不需要元素相对自身原始位置位移，也可以把horse容器的position设为absolute，此时left是相对于外层#track容器的偏移，可根据实际布局需求调整。

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