html - 字体动画部分起作用

Question

我是编程新手，我的动画有些问题。
问题是我只能移动“ Treats”，而不能移动“ Tricks”。任何建议都将不胜感激...我可能有些烦恼。 :)

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;
  }
}

<section>
  <div class="tricks">
    <h1 class="moving">Tricks</h1>
    <ul>
      <li>Ghoslty Musical Chairs</li>
      <li>Pin the Tail on the Black Cat</li>
      <li>Mummy Wrap</li>
      <li>Bob for Apples</li>
      <li>Carve Jack-O-Lanterns</li>
    </ul>
  </div>
  <div class="treats">
    <h1 class="moving">Treats</h1>
    <ul>
      <li>Chocolate Mice</li>
      <li>Spider Cider</li>
      <li>Caramel Apples</li>
      <li>Mud and Worms</li>
      <li>Monster Eyes</li>
    </ul>
  </div>
</section>

Answer 1

尝试这个：

.treats {
    float: left;
    width: 50%;
}

.tricks {
    float: left;
    width: 50%;
}

section ul {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}