CSS3 Animation is not moving - html

Question

I am trying to move my block element to left with animation and even use animation shorthand property but its not moving.
Here's my HTML:
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character"></div>
</div>
Here's my CSS:
#game{
width: 400px;
height: 500px;
border: 1px solid black;
margin: auto;
}
#block{
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: mblock 1s infinite linear;
-webkit-animation: mblock 1s infinite linear;
-moz-animation: mblock 1s infinite linear;
}
#-webkit-keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#-moz-keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#hole{
width: 50px;
height: 150px;
background-color: red;
position: relative;
left: 400px;
top: -500px;
animation: mblock 2s infinite linear;
-webkit-animation: mblock 2s infinite linear;
-moz-animation: mblock 2s infinite linear;
}
Here's the JSFIDDLE: https://jsfiddle.net/nwmLpdba/
Any idea what's causing this?

Answer 1

Removing the semi-colon would help.
#keyframes mblock {
0%{ left:400px; } /* no need to add semicolon at the end of the block*/
100%{ left:-50px; } /* no need to add semicolon at the end of the block */
}

Answer 2

#-webkit-keyframes mblock {
100%{ left:-50px };
}
#-moz-keyframes mblock {
100%{ left:-50px };
}
#keyframes mblock {
100%{ left:-50px };
}
please remove the 0%. Because 0% is already set in default class.