PROSAGA码农传奇-html/HTML5-如何为单个列表项设置动画？

<div class =“post-text”itemprop =“text”>
  <P>
    而不是使用
     <code>
      position: absolute;
    </code>
    ，你需要使用
     <code>
      position: relative;
    </code>
  </p>
   <pre>
    <code>
      #BeverlyWarbrick {
   position: relative;
}

</code>
  </pre>
  <P>
    例如：
  </p>
  <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-css lang-css prettyprint-override">
        <code>
          body {
  background-color: #000;
}

ul {
  margin: 0;
  padding: 0;
}

.women {
  margin-left: 10px;
}

.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
}

.women div {
  position: relative;
  animation: 2s float-right ease-out forwards;
  left: -500px;
}

.women div:nth-of-type(2) {
  animation-delay: 1s;
}

@keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="women">
  <ul>
    <div id="BeverlyWarbrick">
      <li>Beverly Warbrick</li>
    </div>
    <div id="MargaretNooski">
      <li>Margaret Nooski</li>
    </div>
  </ul>
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    请注意，我已从以下代码段中删除了一些代码，并且仅为了演示目的将其保留在最小值。
  </p>
  <P>
    而且，编写CSS的方式不具备可扩展性。您正在为每个元素重复相同的CSS。除此之外，考虑使用标签选择器，建议使用SASS进行此类操作，以便您可以轻松地将每个项目的延迟循环到动画，或者您可以使用jQuery附加一个
     <code>
      class
    </code>
     对这些项目中的每一项进行延迟，然后依次为它们设置动画。
  </p>
  <HR />
  <P>
    在您发表评论之后，我还添加了一个jQuery解决方案来延迟这些项目。例如：
  </p>
  <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-js lang-js prettyprint-override">
        <code>
          let c = 0;
$(".women").find('div').each(function() {
  let elm = $(this);
  elm.css({
    'animation-delay': `${c}s`
  });

c++;
});
        </code>
      </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          body {
  background-color: #000;
}

ul {
  margin: 0;
  padding: 0;
}

.women {
  margin-left: 10px;
}

.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
}

.women div {
  position: relative;
  animation: 2s float-right ease-out forwards;
  left: -500px;
}