CODEWITHSUNDEEP
javascriptcssanimation
Kartik Anand
Kartik Anand

Reputation: 4609

Adding second animation on same object removes css properties

I'm trying to create a progress bar using a div and border-bottom property.

I've two classes:

anim-start: This makes the progress bar go from 0 to 70%
anim-end: This makes the progress bar go to 100%, and them remove the border

I'm using the property animation-fill-mode: forwards so that the css properties stay.

The problem is that when I apply the second class, it would remove the properties of earlier class, and therefore the progress bar would just vanish.

Please see the fiddle below:

  var progress_bar = document.querySelector(".progress")
  progress_bar.className = progress_bar.className + " anim-start";

  setTimeout(function() {
    progress_bar.className = progress_bar.className + " anim-end";
  }, 3000);
.progress.anim-start {
  animation-duration: 2s;
  animation-name: progress-start-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-start-anim {
  0% {
    border-bottom: 5px solid #333;
    width: 0%;
  }
  100% {
    border-bottom: 5px solid #333;
    width: 70%;
  }
}

.progress.anim-end {
  animation-duration: 2s;
  animation-name: progress-end-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-end-anim {
  99% {
    width: 100%
  }
  100% {
    border-bottom: none;
  }
}
<div class="progress">
</div>

Upvotes: 3

Views: 60

Answers (1)

maioman
maioman

Reputation: 18744

you can have the second animation start off from where the first one ends:

  var progress_bar = document.querySelector(".progress")
  progress_bar.className = progress_bar.className + " anim-start";

  setTimeout(function() {
    progress_bar.className = progress_bar.className + " anim-end";
  }, 3000);
.progress.anim-start {
  animation-duration: 2s;
  animation-name: progress-start-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-start-anim {
  0% {
    border-bottom: 5px solid #333;
    width: 0%;
  }
  100% {
    border-bottom: 5px solid #333;
    width: 70%;
  }
}

.progress.anim-end {
  animation-duration: 2s;
  animation-name: progress-end-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-end-anim {
  0% {
    border-bottom: 5px solid #333;
    width: 70%;
  }
  99% {
    width: 100%
  }
  100% {
    border-bottom: none;
  }
}
<div class="progress">
</div>

the reason why your version isn't working is that your second animation is being overridden by the first, and you're missing border-bottom: property in the second.

  var progress_bar = document.querySelector(".progress")
  progress_bar.className = progress_bar.className + " anim-start";

  setTimeout(function() {
    progress_bar.className = progress_bar.className + " anim-end";
  }, 3000);
.progress.anim-start {
  animation-duration: 2s;
  animation-name: progress-start-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-start-anim {
  0% {
border-bottom: 5px solid #333;
width: 0%;
  }
  100% {
border-bottom: 5px solid #333;
width: 70%;
  }
}

.progress.anim-end {
  animation-duration: 2s;
  animation-name: progress-end-anim;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress-end-anim {
  0% {
border-bottom: 5px solid #333;
   /* */
  }
  99% {
width: 100%
  }
  100% {
border-bottom: none;
  }
}
<div class="progress">
</div>

Upvotes: 2

Related Questions