Why is my CSS animation on the image not working?

Question

This is the CSS code I'm using:

img {
    position: relative;
    -webkit-animation: movingImage infinite linear 2s infinite;
    animation: movingImage infinite linear 2s infinite;
}
@-webkit-keyframes movingImage {
    0%  {left: 0px; top: 0px;}
    25% {left: 200px; top: 0px;}
    50% {left: 200px; top: 200px;}
    75% {left: 0px; top: 200px;}
    100% {left: 0px; top: 0px;}
}
@keyframes movingImage {
    0%  {left: 0px; top: 0px;}
    25% {left: 200px; top: 0px;}
    50% {left: 200px; top: 200px;}
    75% {left: 0px; top: 200px;}
    100% {left: 0px; top: 0px;}
}

And the HTML that I have:

<img src="image.png" width="50" height="50" alt="Image">

Answer 1

The correct animation full syntax is:

@keyframes name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

In your example:

animation: movingImage infinite linear 2s infinite;

The last infinite is not a valid value anymore, as you already declared it earlier.

The correct full syntax is:

animation: movingImage 2s linear 0s infinite normal none running;

Or the shorten version:

animation: movingImage 2s linear infinite;

JsFiddle Demo

img {
    position: relative;
    -webkit-animation: movingImage 2s linear infinite;
    animation: movingImage 2s linear infinite;
}
@-webkit-keyframes movingImage {
    0%  {left: 0px; top: 0px;}
    25% {left: 200px; top: 0px;}
    50% {left: 200px; top: 200px;}
    75% {left: 0px; top: 200px;}
    100% {left: 0px; top: 0px;}
}
@keyframes movingImage {
    0%  {left: 0px; top: 0px;}
    25% {left: 200px; top: 0px;}
    50% {left: 200px; top: 200px;}
    75% {left: 0px; top: 200px;}
    100% {left: 0px; top: 0px;}
}

<img src="image.png" width="50" height="50" alt="Image">