Текстовая анимация цикла jQuery?

Я не могу заставить мою текстовую анимацию зацикливаться для моего задания. Он был создан с использованием CSS, JQuery и HTMl соответственно и отлично работает, но я пытался и не мог поместить его в непрерывный цикл, мой код выглядит следующим образом:

$(window).load(function() {
  setTimeout(function() {
    $('.fly-in').removeClass('hidden');
  }, 700);
});

#fly-in {
  position: absolute;
  left: 50%;
  top: 50%;
  list-style: none;
  transform: translateX(-50%) translateY(-50%);
}

fly-in li {
  display: inline-block;
  margin-right: 30px;
  font-family: sans-serif, helvetica;
  font-weight: 600;
  font-size: 38px;
  color: #000000;
  opacity: 1;
  transition: all 2.8s cubic-bezier(0.6, -.005, 0.32, 1.75);
}

.fly-in.hidden li {
  opacity: 0;
}

.fly-in.hidden li:nth-child(1) {
  transform: translateX(150px) translateY(-170px);
}

.fly-in.hidden li:nth-child(2) {
  transform: translateX(-210px) translateY(170px);
}

.fly-in.hidden li:nth-child(3) {
  transform: translateX(20px) translateY(-100px);
}

.fly-in.hidden li:nth-child(4) {
  transform: translateX(-100px) translateY(-20px);
}

.fly-in.hidden li:nth-child(5) {
  transform: translateX(-70px) translateY(-200px);
}

.fly-in.hidden li:nth-child(6) {
  transform: translateX(200px) translateY(70px);
}

.fly-in.hidden li:nth-child(7) {
  transform: translateX(30px) translateY(200px);
}

.fly-in.hidden li:nth-child(8) {
  transform: translateX(30px) translateY(-100px);
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class = "fly-in hidden card-title">
  <li>K</li>
  <li>E</li>
  <li>Y</li>
  <li>D</li>
  <li>A</li>
  <li>T</li>
  <li>E</li>
  <li>S</li>
</ul>

Анимация работает, но я не могу ее зациклить Извините, если этот вопрос сбивает с толку, кстати, я новичок в кодировании!

Просто добавьте animation-iteration-count: infinite; в класс fly-in li

— 12.04.2018 22:07

Возможный дубликат Как воспроизводить переходы CSS3 в цикле?

— 12.04.2018 22:08

Вы ведь знаете, что у вас есть #fly-in, fly-in и .fly-in, верно?

— 12.04.2018 22:08

Используйте сниппет - исправьте селекторы CSS - не добавляйте как можно больше тегов, придерживайтесь релевантных

— 12.04.2018 22:12

css

12.04.2018 22:05

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...