javascript - Any way to animate this? A HTML game I'm making -

i started making html roguelike, , want animations working. way make character slide, not teleport there? made of divs. here's code i'm using:

function keypress(e){ //tbd var x = e.which || e.keycode; if (input){     if (x==37){ //left         nexttile = [             [parseint(charpos[0])],             [parseint(charpos[1]) - 1],         ]         if ( canpassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[1]--;         else return 0;      }     else if(x==38){ //up         nexttile = [             [parseint(charpos[0]) - 1],             [parseint(charpos[1])],         ];         if ( canpassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[0]--;         else return 0;      }     else if(x==39){ //right          nexttile = [             [parseint(charpos[0])],             [parseint(charpos[1]) + 1],         ];         if ( canpassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[1]++;         else return 0;     }     else if(x==40){ //down         nexttile = [             [parseint(charpos[0]) + 1],             [parseint(charpos[1])],         ];         if ( canpassthrough(map[nexttile[0]][nexttile[1]]) ) charpos[0]++;         else return 0;     }     updatehero();      } } function canpassthrough(t){     if ((t!=1)&&(t!=0)&&(typeof t !== 'undefined')){         return true;     }     else {         return false;     } }  function updatehero(){     screen = document.getelementbyid("game-field");     oldchar = document.getelementbyid("hero");     if (oldchar) screen.removechild(oldchar);        heromod = document.createelement("div");     heromod.id = "hero";     heromod.style.width = tilescale;     heromod.style.height = tilescale;     heromod.style.left = charpos[1]*parseint(tilescale) + "px";     heromod.style.top = charpos[0]*parseint(tilescale) + "px";      screen.appendchild(heromod);      centerchar(); } 

this javascript code i'm using basic character movement. here's css of "@" div:

#hero {     position: absolute;     background-size: contain;     background-image: url(../img/charplaceholder.png); } #hero:after{     content: "0";     color: transparent;  } 

thanks!

try adding css transition div. css transition applies new style(s) on period of time specified. can transition:all .5s ease; means any new styles applied applied on period of time or can give property name transition:left .5s ease;. here code you.

#hero {     position: absolute;     background-size: contain;     background-image: url(../img/charplaceholder.png);      /*do these single properties*/             -o-transition:left .5s ease;     -moz-transition:left .5s ease;     -webkit-transition:left .5s ease;     -ms-transition:left .5s ease;      -o-transition:left .5s ease;     -moz-transition:left .5s ease;     -webkit-transition:left .5s ease;     -ms-transition:left .5s ease;      /*do code transitions properties*/     -o-transition:all .5s ease;     -moz-transition:all .5s ease;     -webkit-transition:all .5s ease;     -ms-transition:all .5s ease;     transition:all .5s ease; }