title: Make Coin Flip Animation Two Sided
body: <p>I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle:
  <a href="https://jsfiddle.net/sx0t0kc8/1/" rel="nofollow">jsFiddle Link</a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="coin-flip"&gt;
          &lt;button id="btnFlip"&gt;Flip the Coin&lt;/button&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
          &lt;div id="coin-flip-cont"&gt;
              &lt;div id="coin"&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
          &lt;h2 id="result"&gt;&lt;/h2&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Javascript, jQuery Code:</p>
  
  <pre><code>$(function() {
          var coin = {
              sideOne: "./img/image1.png",
              sideTwo: "./img/image2.png"
          }
  
          $("#btnFlip").click(function() {
              $("#coin").html(`&lt;img class="animated flip"src="${coin[result]}" width="200" length="200"/&gt;`);
          });
  });
  </code></pre>
  
  <p>CSS is from Animate.css, You can view it in the Fiddle.</p>
  
  <p>Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.</p>
  
  <p>EDIT: Just adding this as an example of what I would like to achieve <a href="http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2" rel="nofollow">http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2</a>
  I feel that this can be done in a much simpler way and with the css that I already have.</p>