I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML:
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character"></div>
</div>
And here is 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;
}
If you'd like to see the issue in action, you can check out this JSFIDDLE link: https://jsfiddle.net/nwmLpdba/
Can anyone provide some insight into what might be causing this problem?