Preventing CSS animation from restarting each time JS setInterval runs-CodePudding

I'm trying to add an intro animation to a timer using JS, but it seems to restart each time the function with a setinterval runs. The function updates the timer every second. This is my script:

    function updateTimer(){
        var target = Date.parse("9 January 2023, 00:00:00");
        var today = new Date();
        var diff = target - today;
        
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor(diff / (1000 * 60 * 60));
        var mins = Math.floor(diff / (1000 * 60));
        var secs = Math.floor(diff / 1000);

        var days = days;
        var hours = hours - days * 24;
        var minutes = mins - hours * 60;
        var seconds = secs - mins * 60;
        
        document.getElementById("timer").innerHTML =
        '<div>'   days   '<span> Days</span></div>'  
        '<div>'   hours   '<span> Hours</span></div>'  
        '<div>'   minutes   '<span> Minutes</span></div>'  
        '<div>'   seconds   '<span> Seconds</span></div>';
    }
        setInterval('updateTimer()', 1000);

The script will show timer on the following HTML code:

    <div id="timer">
    <div><span>Days</span></div>
    <div><span>Hours</span></div>
    <div><span>Minutes</span></div>
    <div><span>Seconds</span></div>
    </div>

And the animation that im trying to apply has the following keyframes:

@keyframes timerSlideUp{
    0%{
    opacity: 0%; animation-delay: 5s;
    }
    100%{
    opacity: 100%;
    }
}

With the decorative CSS:

#timer{
    color: white;
    padding: 20px;
    text-align: center;
}

#timer div{
    display: inline-block;
    min-width: 40px;
    padding: 15px;
    background: transparent;
    border-radius: 3px;
    border: 5px solid white;
    margin-top: 30%;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    animation: timerSlideUp 5s forwards;
}

I haven't tried anything because I don't know at all how I could get around or fix this.

I'm trying to make the timer to fade in and stay in place (thus the "forwards" in the "animation" property). I'm planning to also add other animations in the future, so these restarts make it impossible.

Thanks in advance!

CodePudding user response：

Move the animation up into the parent element and set animation-iteration-count to 1

I set a background: blue on the body as the white color didn't show anything when running the snippet

function updateTimer() {
  var target = Date.parse("9 January 2023, 00:00:00");
  var today = new Date();
  var diff = target - today;

  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hours = Math.floor(diff / (1000 * 60 * 60));
  var mins = Math.floor(diff / (1000 * 60));
  var secs = Math.floor(diff / 1000);

  var days = days;
  var hours = hours - days * 24;
  var minutes = mins - hours * 60;
  var seconds = secs - mins * 60;

  document.getElementById("timer").innerHTML =
    '<div>'   days   '<span> Days</span></div>'  
    '<div>'   hours   '<span> Hours</span></div>'  
    '<div>'   minutes   '<span> Minutes</span></div>'  
    '<div>'   seconds   '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);

body {
  background: blue;
}

@keyframes timerSlideUp {
  0% {
    opacity: 0%;
    animation-delay: 5s;
  }
  100% {
    opacity: 100%;
  }
}

#timer {
  color: white;
  padding: 20px;
  text-align: center;
  animation: timerSlideUp 5s forwards 1;
}

#timer div {
  display: inline-block;
  min-width: 40px;
  padding: 15px;
  background: transparent;
  border-radius: 3px;
  border: 5px solid white;
  margin-top: 30%;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

<div id="timer">
  <div><span>Days</span></div>
  <div><span>Hours</span></div>
  <div><span>Minutes</span></div>
  <div><span>Seconds</span></div>
</div>