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;
    }
    
    .translator {
      -webkit-transform:translate(0px,100px);
      -moz-transform:translate(0px,-100px);
      -ms-transform:translate(0px,-100px);
      -o-transform:translate(0px,100px);
      transform:translate(0px,-100px);
    }
    
  </style>
  
    
  
  <script>
    
    function move_box() {
      var the_box = document.getElementById("the-box");
      if (the_box.classList.contains("translator")) {
        the_box.classList.remove("translator");
      } else {
        the_box.classList.add("translator");
      }
    }
    
  </script>
<body>
  <button onclick="move_box()">toggle 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