Move like in the link

HTML & CSS
1

i am trying to move button like this in the link http://www.gamesforthebrain.com/game/twincol/ but i cant move it. here is what i have done.


<div id="box" style='width:200px;height:200px;border:1px solid black;'/>

    <button id="one" type="button" >Button1</button>
    <button id="two" type="button" >Button2</button>
<button id="three" type="button">Button3</button>

<style>

button{
-webkit-appearance:none;width:40px;height:40px;padding: 0;text-align: center;vertical-align: middle;border: 1px solid red;font-size:10px;font-weight:bold;
}

#one, #two, #three
{
position:relative;

}
#one
{
-webkit-animation:levelseven 16s  infinite;
    -webkit-animation-direction:alternate;




}

#two
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_1 8s  infinite;

}

#three
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_2 10s  infinite;

}


@-webkit-keyframes levelseven /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
25%  { left:200px; top:0px;}
50%  { left:100px; top:200px;}
75%  { left:150px; top:50px;}
100% {background:cyan; left:0px; top:0px;}
}

@-webkit-keyframes levelseven_1 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {background:darkgoldenrod; left:0px; top:200px;}
100% { left:0px; top:0px;}
  }


@-webkit-keyframes levelseven_2 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}

</style>
2

Hi,

The button is moving in Chrome ok. It won’t move in any other browsers because you have not added all the other vendor extensions (and finishing with the non prefixed version).

You also need to close the div properly (</div>) with a closing div tag as the div is not self closing.