使用Jquery的第n个元素标签的动态css动画？

Question

我有一个包含文本的Javascript对象数组，需要在CSS动画中从左到右重复。如何使用jQuery为p:n-th元素创建动态CSS？

我想为p:nth元素和关键帧创建一个动态CSS，以便在完成所有对象文本时重复它。请帮我。提前致谢

var adv = ['SUPERBOWL RESERVATIONS BOOK TODAY AND GET 20% OFF','5 Ways to Maximize Banner Ads with Content. Every type of advertising','5 Ways to Maximize Banner Ads with Content. Every type of advertising','This lists contains the banner content including images and links to destination content.'] ;
console.log(adv);

for (var i = 0; i < adv.length; i++) {
  $('#marquee').append('<p id="">' + adv[i].value + '</p>');
}

.marquee p {
  position: fixed;
  font-family: Tahoma, Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 0px;
  text-align: center;
  color: #333;
  /* text-shadow: 1px 1px 0px #000000; */
  filter: dropshadow(color=#000000, offx=1, offy=1);
  transform: translateX(100%);
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
.marquee p:nth-child(1) {
  -webkit-animation-fill-mode: both;
  animation: left-one 100s 8.5s linear infinite;
  -moz-animation: left-one 100s 8.5s linear infinite;
  -webkit-animation: left-one 100s 8.5s linear infinite;
  animation-delay: 2s;
}
.marquee p:nth-child(2) {
  animation: left-two 100s 8.5s ease infinite;
  -moz-animation: left-two 100s 8.5s ease infinite;
  -webkit-animation: left-two 100s 8.5s ease infinite;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
}
.marquee p:nth-child(3) {
  -webkit-animation-fill-mode: both;
  animation: left-three 100s 8.5s ease infinite;
  -moz-animation: left-three 100s ease infinite;
  -webkit-animation: left-three 100s 8.5s ease infinite;
  animation-delay: 2s;
}
@-moz-keyframes left-one {
  0% {
    -moz-transform: translateX(100%);
  }
  10% {
    -moz-transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(0);
  }
  50% {
    -moz-transform: translateX(-100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}
@-moz-keyframes left-two {
  0% {
    -moz-transform: translateX(100%);
  }
  50% {
    -moz-transform: translateX(100%);
  }
  60% {
    -moz-transform: translateX(0);
  }
  90% {
    -moz-transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}
@-moz-keyframes left-three {
  0% {
    -webkit-transform: translateX(100%);
  }
  90% {
    -webkit-transform: translateX(100%);
  }
  10% {
    -webkit-transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee" id="marquee"></div>