1

I can't get my text animation to loop for my assignment. It has been created using CSS, JQuery and HTMl respectively and runs perfectly but I have been trying and failing to put it on a continuous loop, my code is as follows:

$(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>

The animation works but I can't get it to loop Sorry if this question is confusing btw I'm very new to coding!

Improve this question
4
  • Just add animation-iteration-count: infinite; in fly-in li class Commented Apr 12, 2018 at 20:07
  • Possible duplicate of How to play CSS3 transitions in a loop? Commented Apr 12, 2018 at 20:08
  • You know that you have #fly-in, fly-in, and .fly-in, right? Commented Apr 12, 2018 at 20:08
  • Use a snippet - fix your CSS selectors - don't add as much tags as possible, stick to relevant ones Commented Apr 12, 2018 at 20:12
Related questions
1
text animation using jquery
2
Text animation from left and right in continuous loop using jquery
0
jQuery cycle for text animation on a slideshow
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.