Block does not move using keyframes-CodePudding

The keyframes aren't making the block move. I'm new to using keyframes so I'm bad at it.

#block{
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
    animation: block is infinite linear;
}

@keyframes block{
    0%{left:480px;}
    100%{left: -40px;}
}

CodePudding user response：

I fixed your code using the examples on developer.mozilla.org. I hope this is the expected behavior.

animation-iteration-count: infinite; will make the animation repeat forever.

animation-name defines the identifier used in @keyframes.

animation-duration specifies how many seconds or milliseconds the animation takes to complete.

#block{
    width: 20px;
    height: 20px;
    background-color: blue;
    position: absolute;
    top: 130px;
    left: 480px;
    animation-duration: 3s;
    animation-name: block;
    animation-iteration-count: infinite;
}

@keyframes block  {
    0% {
      left: 480px; 
    }
    
    100% {
      left: -40px;
    }
}

<div id="block"></div>