Question 303118 in Html Question posted in
Some basic documentation can be found here.

Html – How to pause the css animations instead of delay

I have setup a css animation which seems to be working well enough however I am having issues trying to get the animation to pause as opposed to delay.

What I want is for my text to come in word by word (working) then hold when fully visible for 5s before fading out and starting the next sentences animation.

Currently I have the animation for the first word coming in then it goes away, a 5s delay occurs then the next sentence appears.

How would I change this code to get the animation to pause at the end of the first sentence as opposed to delaying for 5s.

window.addEventListener('load', function() {
  let fadeLineDivs =  document.querySelectorAll('.fade-line');
  fadeLineDivs.forEach(function(fadeLineDiv) {
    let textContent = fadeLineDiv.textContent;
    let words = textContent.split(' ');
    fadeLineDiv.innerHTML = '';
    words.forEach(function(word) {
      let span = document.createElement('span');
      span.textContent = word + ' ';
      span.classList.add('fade-word');
      fadeLineDiv.appendChild(span);
    });
  });
});
@keyframes fadeLine {
            0%, 25% {
                opacity: 0;
            }
            26%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord1 {
            0%, 25% {
                opacity: 0;
            }
            29%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord2 {
            0%, 29% {
                opacity: 0;
            }
            32%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord3 {
            0%, 32% {
                opacity: 0;
            }
            35%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord4 {
            0%, 35% {
                opacity: 0;
            }
            38%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord5 {
            0%, 38% {
                opacity: 0;
            }
            41%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        @keyframes fadeWord6 {
            0%, 41% {
                opacity: 0;
            }
            44%, 50% {
                opacity: 1;
            }
            53%, 100% {
                opacity: 0;
            }
        }
        .fade-line {
            position: absolute;
            opacity: 0;
            animation: fadeLine 12s ease-in-out forwards;
            animation-iteration-count: infinite;
        }
        .fade-line:nth-child(2),
        .fade-line:nth-child(2) .fade-word {
            animation-delay: 5s;
        }
        .fade-word {
            opacity: 0;
            animation: fadeWord6 12s ease-in-out forwards;
            animation-iteration-count: infinite;
        }
        .fade-word:nth-child(1) {
            animation-name: fadeWord1;
        }
        .fade-word:nth-child(2) {
            animation-name: fadeWord2;
        }
        .fade-word:nth-child(3) {
            animation-name: fadeWord3;
        }
        .fade-word:nth-child(4) {
            animation-name: fadeWord4;
        }
        .fade-word:nth-child(5) {
            animation-name: fadeWord5; 
        }
    <div id="text-container">
        <p class="fade-line">First line of text</p>
        <p class="fade-line">Second line of text</p>
    </div>
Tags:

2

Answers


  1. 0

    You can use animation-play-state: paused

    You can see about it here: https://www.w3schools.com/cssref/css3_pr_animation-play-state.php

    I hope this help you.

    Login or Signup to reply.
  2. 0

    From what you are trying to say I think you need to make some changes in your CSS and js file.

    <style>
  @keyframes fadeLine {
    0%, 25% {
      opacity: 0;
    }
    26%, 50% {
      opacity: 1;
    }
    51%, 75% {
      opacity: 1;
    }
    76%, 100% {
      opacity: 0;
    }
  }

  @keyframes fadeWord {
    0%, 25% {
      opacity: 0;
    }
    29%, 50% {
      opacity: 1;
    }
    51%, 75% {
      opacity: 1;
    }
    76%, 100% {
      opacity: 0;
    }
  }

  .fade-line {
    position: absolute;
    opacity: 0;
    animation: fadeLine 12s ease-in-out forwards;
    animation-iteration-count: infinite;
  }

  .fade-line:nth-child(2),
  .fade-line:nth-child(3),
  .fade-line:nth-child(4) {
    animation-delay: 17s; 
  }

  .fade-word {
    opacity: 0;
    animation: fadeWord 12s ease-in-out forwards;
    animation-iteration-count: infinite;
  }

  .fade-line:nth-child(2) .fade-word {
    animation-delay: 6s;
  }

  .fade-line:nth-child(3) .fade-word {
    animation-delay: 11s;
  }

  .fade-line:nth-child(4) .fade-word {
    animation-delay: 16s;
  }
</style>

    Also change the js file

    <script>
  window.addEventListener('load', function() {
    let fadeLineDivs =  document.querySelectorAll('.fade-line');
    fadeLineDivs.forEach(function(fadeLineDiv) {
      let textContent = fadeLineDiv.textContent;
      let words = textContent.split(' ');
      fadeLineDiv.innerHTML = '';
      words.forEach(function(word) {
        let span = document.createElement('span');
        span.textContent = word + ' ';
        span.classList.add('fade-word');
        fadeLineDiv.appendChild(span);
      });
    });
  });
</script>

    This should work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search