Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <style>
    
    div {
      -webkit-transition:all .5s ease-out;
      -moz-transition:all .5s ease-out;
      -ms-transition:all .5s ease-out;
      -o-transition:all .5s ease-out; 
      transition:all .5s ease-out;
    }
    
  </style>
  
  <script>
    
    function move_box() {
      var the_box = document.getElementById("the-box");
      set_translate(the_box, 100);
    }
    
    function set_translate(e, pix) {
      e.style["-webkit-transform"] = "translate(0px, "+ pix +"px)";
      e.style["-moz-transform"] = "translate(0px, -" + pix +"px)";
      e.style["-ms-transform"] = "translate(0px, -" + pix + "px)";
      e.style["-o-transform"] = "translate(0px, " + pix  + "px)";
      e.style["transform"] = "translate(0px, -" + pix + "px)";
    }
    
  </script>
<body>
  <button onclick="move_box()">start animation</button>
  <div id="the-box" style="width:200px; height:200px; background-color:pink;"></div>
</body>
​
    
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers