Animation wont loop

HTML-CSS
1

I made this animation and when I view it in the browser it isn’t looping the animation after its been static for 3 seconds. Can someone help me?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Please Enquire Animation</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      margin: 0;
    }

    .animated-text {
      font-family: 'Great Vibes', cursive;
      font-size: 40px;
      font-weight: bold;
      color: #000;
      display: flex;
      text-decoration: none; /* No underline for the link */
    }

    .letter {
      opacity: 0;
      animation: appearSize 1s forwards;
    }

    @keyframes appearSize {
      0% {
        transform: scale(1);
        opacity: 0;
      }
      50% {
        transform: scale(1.5);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <a href="YOUR_LINK_HERE" class="animated-text" id="text-container">
    <span class="letter" style="animation-delay: 0s;">P</span>
    <span class="letter" style="animation-delay: 0.2s;">l</span>
    <span class="letter" style="animation-delay: 0.4s;">e</span>
    <span class="letter" style="animation-delay: 0.6s;">a</span>
    <span class="letter" style="animation-delay: 0.8s;">s</span>
    <span class="letter" style="animation-delay: 1s;">e</span>
    <span class="letter" style="animation-delay: 1.2s;">&nbsp;</span> <!-- Space between words -->
    <span class="letter" style="animation-delay: 1.4s;">E</span>
    <span class="letter" style="animation-delay: 1.6s;">n</span>
    <span class="letter" style="animation-delay: 1.8s;">q</span>
    <span class="letter" style="animation-delay: 2s;">u</span>
    <span class="letter" style="animation-delay: 2.2s;">i</span>
    <span class="letter" style="animation-delay: 2.4s;">r</span>
    <span class="letter" style="animation-delay: 2.6s;">e</span>
  </a>

  <script>
    const letters = document.querySelectorAll('.letter');
    
    function resetAnimation() {
      letters.forEach((letter, index) => {
        letter.style.animation = `appearSize 1s forwards`;
        letter.style.opacity = '0';
        letter.style.animationDelay = `${index * 0.2}s`;
      });
    }

    function startAnimationLoop() {
      resetAnimation();
      setTimeout(() => {
        // Clear the opacity after 3 seconds of being static to restart the animation
        letters.forEach(letter => {
          letter.style.opacity = '0';
        });
        startAnimationLoop(); // Restart the animation loop
      }, 8000); // 3 seconds of static hold (after all letters appear)
    }

    startAnimationLoop(); // Initiate the loop
  </script>
</body>
</html>
2
  • does it run once - full cycle or not really?
  • if you happen to have any repl/codepen link for it the it will be even better to troubleshoot

happy coding :slight_smile:

1 Like
3

I recommend looking into the Web Animations API for what you’re after. Using the Web Animations API - Web APIs | MDN

This should help provide you with what you need for a looping animation you can control with Javascript.

At minimum, it will make things less complicated.

1 Like
4

Yes this does run the animation once and works as intended but doesnt loop the animation after being static

5

here is the codepen link https://codepen.io/DarrylRimer/pen/oNKBRye thanks for the help :slight_smile:

6

you are using “setTimeout”, do you recall what “setTimeout” does in codebase?

have you heard about “setInterval”? should be useful to read about it Understanding the Difference Between setTimeout and setInterval in JavaScript | by The Humble Coder | Medium

happy coding :slight_smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.