title: Float image from left to right with a animation?
body: <p>I have a hamburger (three horizontal bars) icon I want to change from <code>float: left</code> to <code>float:right</code> but with a smooth animation.</p>
  <p><a href="https://i.stack.imgur.com/yUiYk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yUiYk.png" alt="http://i.imgur.com/Ps1ZBDT.png?1" /></a></p>
  <p>I can't use jQuery but I can use JavaScript so I have this small function that changes float state when the image is clicked:</p>
  <pre><code>var menuButton = document.getElementById('menu-button');
  
  
  menuButton.onclick = function () {
  
      menuButton.style.float =  &quot;right&quot;;
  }
  </code></pre>
  <p>So this works but not smooth animation how can I make it a smooth animation?</p>
  <p>A running demo:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var menuButton = document.getElementById('menu-button');
  
  
  menuButton.onclick = function () {
  
      menuButton.style.float =  "right";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   nav {
          background: pink;
          height: 60px;
      }
  
      nav #menu-button {
          margin: 20px 24px;
          display: inline;
          float: left;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;nav id="nav-bar"&gt;
          &lt;a href="#/index"&gt;&lt;img id="menu-button"alt="menu icon" src="images/toggle-open.svg"&gt;&lt;/a&gt;
      &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>