为什么 CSS3 动画不工作？

Question

请指教，为什么下面的CSS代码不起作用？我还在 CSS 下面写了 HTML 代码。我想从右向左移动文本，例如 - http://mindgate.in/product/vtransact/

ul.list-points2 li {
  animation: linear alternate;
  -webkit-animation: linear alternate;
  -moz-animation: linear alternate;
  -o-animation: linear alternate;
  animation-name: run;
  animation-duration: 1s;
  -webkit-animation-name: run;
  -webkit-animation-duration: 1s;
  -moz-animation-name: run;
  -moz-animation-duration: 1s;
  position: relative;
}

@keyframes run {
  0% {
    right: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes run {
  0% {
    right: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

<ul class="list-points2">
  <li style="color:#fff;margin-bottom: 0;">
    <p>Each function is priced Individually</p>
  </li>
  <li style="color:#fff;margin-bottom: 0;">
    <p style="color:#5ec4eb;font-style:italics;">Price closer to <span style="font-style: italic;"><strong>10%</strong> of competition.</span></p>
  </li>
  <li style="margin-left: 70px;margin-bottom: 0;list-style-type: disc !important;background-image: none;padding-left: 0;">Less than a cup of coffee!</li>
  <li style="margin-top: 10px;">Don't believe us? - <em> <strong style="color:#fff600;">TRY IT FOR FREE</strong></em></li>
</ul>

Answer 1

一个选择是给不同的行不同的animation-delay他们的动画：

ul.list-points2 li{
animation: linear alternate;
-webkit-animation: linear alternate;
-moz-animation: linear alternate;
-o-animation: linear alternate;
animation-name: run;
animation-duration: 1s;
-webkit-animation-name: run;
-webkit-animation-duration: 1s;
-moz-animation-name: run;
-moz-animation-duration: 1s;
position: relative;
}
ul.list-points2 li:nth-child(3) {
animation-delay:0.2s;
}
ul.list-points2 li:nth-child(4) {
animation-delay:0.4s;
}
 @keyframes run {
 0% {
right: 0;
}
 50% {
left : 100%;
}
 100% {
left: 0;
}
}
@-webkit-keyframes run {
 0% {
right: 0;
}
 50% {
left : 100%;
}
 100% {
left: 0;
}
}

<ul class="list-points2">
<li style="color:#fff;margin-bottom: 0;">
<p>Each function is priced Individually</p>
</li>
<li style="color:#fff;margin-bottom: 0;" >
<p style="color:#5ec4eb;font-style:italics;">Price closer to <span style="font-style: italic;"><strong>10%</strong> of competition.</span></p>
</li>
<li style="margin-left: 70px;margin-bottom: 0;list-style-type: disc !important;background-image: none;padding-left: 0;" >Less than a cup of coffee!</li>
<li  style="margin-top: 10px;">Don't believe us? - <em> <strong style="color:#fff600;">TRY IT FOR FREE</strong></em></li>
</ul>

为什么 CSS3 动画不工作？

why CSS3 animation not working?

css

keyframe

css-animations