我不知道为什么这个动画有效

Question

if "position:absolute" not exist in #box why animation will not work?

I tried this code when "position:absolute" delete it in #box, but It was not working.

<style>
    #box{
        **position:absolute;**
        width:200px;
        height:200px;
        background-color:red;
        animation:animate 2s none infinite alternate;
    }

    @keyframes animate{
        from{
            left:0;
        }
        50%{
            left:500px;
        }
        to{
            left:500px;
        }

    }
</style>

Answer 1

You shouldn't animate left/right/top/bottom, it is better practice to use transforms . Transforms allow the element to visually move, while their space on the DOM remains, making for safer/smoother animation.

Try this instead

#box {
  width: 200px;
  height: 200px;
  background-color: red;
  animation: animate 2s linear forwards infinite alternate;
}

@keyframes animate {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100px);
  }
}

working demo jsfiddle