title: @keyframes will not work with a div inside a div
body: <p>I am using @keyframes for the first time, but I can't get it to work.</p>
  
  <p>Any idea what I'm doing wrong?</p>
  
  <p>If I put the animation on the .scroll_down div, it animates, but I want the div inside it to animate. Is there some reason why I can't do that?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container_first"&gt;
      &lt;div class="scroll-down"&gt;
        &lt;div id="arrow"&gt;&amp;#8681;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.scroll-down {
    display: block;
    height: 80px;
    width: 110px;
    display: block;
    position: absolute;
    bottom: 0px;
    right: 5%;
    background-color: #222;
    text-align: center;
    z-index: 6;
  }
  
  #arrow {
    color: #FFF;
    font-size: 36px;
    padding-right: 2px;
    padding-top: 10px;
    animation: bounce 1.2s linear infinite;
  }
  
  #arrow { padding-top: 0px; }
  @keyframes bounce {
      0%   {top: 10px;}
      25%  {top: 15px;}
      75%  {top: 20px;}
      100% {top: 25px;}
  }
  </code></pre>