title: Font animation partially working
body: <p>I am new to programming and am having some issues with my animation.
  The issue isI can only get my "Treats"  to move but not the "Tricks". Any advice would be greatly appreciated...I may have gotten a bit over my head. :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    width: 900px;
    margin: 0 auto;
    font-size: 35px;
    text-align: center;
    color: #8ac30c;
    text-shadow: 3px 3px 0 #4c004c, -1px 1px 0.5em #4c004c, 1px -1px 0.5em #4c004c, -2px -2px 0 #4c004c;
  }
  section ul {
    list-style: none;
  }
  .tricks {
    float: left;
  }
  .treats {
    float: right;
  }
  /*text animation*/
  
  .moving {
    font-size: 70px;
    animation: move 8s infinite;
  }
  @keyframes move {
    from {
      margin: 50px;
    }
    5% {
      transform: rotate(10deg);
    }
    25% {
      margin-right: 30px;
    }
    45% {
      margin-right: 50px;
    }
    60% {
      margin-left: 160px;
      transform: rotate(-10deg);
    }
    75% {
      margin-left: 160px;
    }
    to {
      margin: 50px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="tricks"&gt;
      &lt;h1 class="moving"&gt;Tricks&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li&gt;Ghoslty Musical Chairs&lt;/li&gt;
        &lt;li&gt;Pin the Tail on the Black Cat&lt;/li&gt;
        &lt;li&gt;Mummy Wrap&lt;/li&gt;
        &lt;li&gt;Bob for Apples&lt;/li&gt;
        &lt;li&gt;Carve Jack-O-Lanterns&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="treats"&gt;
      &lt;h1 class="moving"&gt;Treats&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li&gt;Chocolate Mice&lt;/li&gt;
        &lt;li&gt;Spider Cider&lt;/li&gt;
        &lt;li&gt;Caramel Apples&lt;/li&gt;
        &lt;li&gt;Mud and Worms&lt;/li&gt;
        &lt;li&gt;Monster Eyes&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>