为什么 CSS3 动画不起作用？答案

【问题标题】：why CSS3 animation not working?为什么 CSS3 动画不起作用？
【发布时间】：2018-04-10 16:40:00
【问题描述】：

请提出建议，为什么下面的 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>

【问题讨论】：

它对我来说是动画的，你的意思是你想让文本行在每个动画之间有延迟吗？
是的，与给定的链接完全相同

标签： css css-animations keyframe

【解决方案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>

【讨论】：