CSS animation move didn't work - html

Question

I wanted to make an image of arrow moving so that readers know they can scroll down to read more content. I tried to do that with the animation in CSS but it didn't work.
section.scrollDownContainer {
width: 100%;
position: absolute;
top: 65px;
}
section.scrollDownContainer img {
display: block;
box-shadow: 5px 5px 5px #333333;
margin: auto;
-webkit-animation: arrowmove 0.5s forwards;
-moz-animation: arrowmove 0.5s forwards;
-ms-animation: arrowmove 0.5s forwards;
-o-animation: arrowmove 0.5s forwards;
animation: arrowmove 0.5s forwards;
}
#-webkit-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-moz-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-ms-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#-o-keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
#keyframes arrowmove {
0% {
left: 0px;
top: 0px;
}
50% {
left: 0px;
top: 50px;
}
100% {
left: 0px;
top: 0px;
}
}
<section class="scrollDownContainer">
<img src="./image/arrow.png">
</section>
Can anyone tell me why? Thank you.

Answer 1

You can use transform: translateY(...) in keyframes
section.scrollDownContainer {
width: 100%;
position: absolute;
top: 65px;
}
section.scrollDownContainer img {
display: block;
margin: auto;
animation: arrowmove 0.5s infinite;
}
#keyframes arrowmove {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(0%);
}
}
<section class="scrollDownContainer">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" width="50px" height="50px">
</section>

Answer 2

The left: and top: properties of the animation will have no effect on your image because the image CSS does not contain a position property.
Add position: relative; or position: absolute; to the CSS for the image...
section.scrollDownContainer img {
position: relative; /* <------------------- added */
display: block;
box-shadow: 5px 5px 5px #333333;
margin: auto;
-webkit-animation: arrowmove 0.5s forwards;
-moz-animation: arrowmove 0.5s forwards;
-ms-animation: arrowmove 0.5s forwards;
-o-animation: arrowmove 0.5s forwards;
animation: arrowmove 0.5s forwards;
}
The animation should then function.
Using left:, right:, top:, or bottom: in CSS requires the element to also have a position property.