title: CSS animation won't stay in place after playing and plays more than once even after adding one iteration
body: <p>just a beginner programmer looking for some help for a website. My goal was to be able to make the bottom image slide down so that the user could click the buttons and switch pages. I wanted the image to stay in its place after finishing the animation. I tried adding the animation-fillmode:forward and that worked but after adding the animation-iteration: 1 code it kept on playing on and on. </p>
  
  <p>Welcome to any help and thank you,
  Aidan Cheung</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;aidancheung.com&lt;/title&gt;
  &lt;/head&gt;
  &lt;style&gt;
   h1 {
    font-family: coolvetica;
    text-align: center;
  }
   .bottom {
          position: absolute;
          top: 275px;
      }
      .bottom:hover img {
       position: absolute;
          -webkit-animation: floatBubble 2s  normal ease-out;
          animation: floatBubble 2s normal ease-out;
          animation-iteration-count: 1;
          animation-fill-mode: forwards;
          -webkit-animation-iteration-count: 1;
          -webkit-animation-fill-mode: forwards;
  
      }
      @-webkit-keyframes floatBubble {
          0% {
              top:275px;
          }
          50%{
             top: 500px;
          }
          100% {
              top:275px;
          }
      }
      @keyframes floatBubble {
          0% {
              top:275px;
          }
          50%{
             top: 500px;
          }
          100% {
              top:275px;
          }
      }
   
  &lt;/style&gt;
  &lt;img src="Website.png" alt="Top Building"&gt;
  &lt;h1 style="line-height:45px;font-size: 100px;"&gt;aidancheung.&lt;br&gt;&lt;i style="font-size: 50px"&gt;portfolio&lt;/i&gt;&lt;/br&gt;&lt;/h1&gt;
  &lt;p style="line-height: 2px;text-align: center;"&gt;&lt;a href="aidancheung.htm"&gt;&lt;img src="home.png" width="545" height="45" title="go to home" alt="Flower"&gt;&lt;/a&gt;&lt;br&gt;&lt;a href="https://www.google.com/"&gt;&lt;img src="portfolio.png" width="545" height="45" title="go to portfolio" alt="Flower"&gt;&lt;/a&gt;&lt;/br&gt;&lt;br&gt;&lt;a href="https://www.google.com/"&gt;&lt;img src="about.png" width="545" height="45" title="go to about" alt="Flower"&gt;&lt;/a&gt;&lt;/br&gt;&lt;/p&gt;
  &lt;div class="bottom"&gt;
  &lt;img class="bottom" src="bottom.png" alt="Bottom Building"&gt;
  &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Update: "added full code because some people asked to see it</p>