I put the images inside div element but why my css animations still didn't work?-CodePudding

I tried putting the images inside div but didn't work. I also tried lots of stuffs and I'm stuck on this for like 2 hours. I also tried using class instead of id, I tried adding another parent element. But none of those work.

#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%;
   
}
div{
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%;
    }
}

<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>

CodePudding user response：

Left: xx works for elements that have position property.
So I set position: relative to your div.
Now it work.

#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%;
   
}
div{
position: relative;
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%;
    }
}

<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>