title: Add CSS bounce animation to a div on click only for once
body: <p>I have a CSS map pin which has some CSS3 animations, here it is:'</p>
  
  <p><a href="https://jsfiddle.net/xg7xfzeq/" rel="nofollow noreferrer">https://jsfiddle.net/xg7xfzeq/</a></p>
  
  <pre><code>body {
    background: #e6e6e6;
  }
  
  .pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #00cae9;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
  }
  .pin:after {
    content: "";
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #e6e6e6;
    position: absolute;
    border-radius: 50%;
  }
  
  .bounce {
    animation-name: bounce;
    animation-fill-mode: both;
    animation-duration: 1s;
  }
  
  .pulse {
    background: #d6d4d4;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    z-index: -2;
  }
  .pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #00cae9;
    animation-delay: 1.1s;
  }
  
  @keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
  
  @keyframes bounce {
    0% {
      opacity: 0;
      transform: translateY(-2000px) rotate(-45deg);
    }
  
    60% {
      opacity: 1;
      transform: translateY(30px) rotate(-45deg);
    }
  
    80% {
      transform: translateY(-10px) rotate(-45deg);
    }
  
    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  .myBounceDiv { 
          -moz-animation:bounce .40s linear;  
          -webkit-animation:bounce .40s linear; 
  } 
  
  @-moz-keyframes bounce {
  
  
   0%{ -moz-transform:scale(0); opacity:0;}
          50%{ -moz-transform:scale(1.3); opacity:0.4; }
          75%{ -moz-transform:scale(0.9); opacity:0.7;}
          100%{ -moz-transform:scale(1); opacity:1;}
  }
  
  @-webkit-keyframes bounce {
          0%{ -webkit-transform:scale(0); opacity:0;}
          50%{ -webkit-transform:scale(1.3); opacity:0.4;}
          75%{ -webkit-transform:scale(0.9); opacity:0.7;}
          100%{ -webkit-transform:scale(1); opacity:1;}
  }
  </code></pre>
  
  <p>and its HTML</p>
  
  <pre><code>&lt;div class='myBounceDiv'&gt;
  &lt;div class='pin bounce'&gt;&lt;/div&gt;
  &lt;div class='pulse'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Well, I want to add bounce css3 animation on click, I have found some solutions for it such as changing CSS style when we click on its div using javascript. 
  While it is possible but when I change its CSS class it will start to bounce every forever. How can make it animate only once? One way could be triggering a timer and after 1000 ms changing its css class into its first class, but there is another problem, my div's class has another animation (when it first appears in page, it drops from top to bottom) so if I change its css class to bouncing animation and again change it to its original the appearance animation trigers again and it is not what I need. 
  Is there any way to achieve what I need using pure javascript and CSS? In fact, i need to make something like this
  <a href="http://dynamicsjs.com/examples/pin.html" rel="nofollow noreferrer">http://dynamicsjs.com/examples/pin.html</a>
  but its animation appears on click using CSS.</p>