Question 201203 in CSS Question posted in
Some basic documentation can be found here.

CSS Staggered Animation – Repeat the animation 2 or 3 times

I am using pure css to create a staggered animation, and I want it to play 2 or 3 times then stops.

The staggered animation is working which plays only once then stops. However I can’t get it to play 2 times then stops.

I’ve tried using this property ‘animation-iteration-count’, but it’s not working.

Not sure can this be achieved by just using pure css, how can I get this staggered animation to play 2 or 3 times then stops?

I am using this code from codepen:

https://codepen.io/dbenmore/pen/eMGzLq

ul {
  padding: 0;
  display: block;
  margin: 24px auto;
  width: 320px;
}

li {
  display: block;
  height: 72px;
  width: 320px;
  background-color: #009688;
  animation-name: animateIn;
  animation-duration: 350ms;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

li + li {
  margin-top: 16px;
}

@keyframes animateIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-8px);
  }
  
  100% {
    opacity: 1;
  }
}
<ul>
  <li style="--animation-order: 1;">
  <li style="--animation-order: 2;">
  <li style="--animation-order: 3;">
  <li style="--animation-order: 4;">
  <li style="--animation-order: 5;">
  <li style="--animation-order: 6;">
</ul>
Tags:

2

Answers


  1. 0

    You can just add more keyframes

    ul {
  padding: 0;
  display: block;
  margin: 24px auto;
  width: 320px;
}

li {
  display: block;
  height: 72px;
  width: 320px;
  background-color: #009688;
  animation-name: animateIn;
  animation-duration: 700ms;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

li + li {
  margin-top: 16px;
}

@keyframes animateIn {
  0%, 55% {
    opacity: 0;
    transform: scale(0.6) translateY(-8px);
  }
  
  50%, 100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}
    <ul>
  <li style="--animation-order: 1;">
  <li style="--animation-order: 2;">
  <li style="--animation-order: 3;">
  <li style="--animation-order: 4;">
  <li style="--animation-order: 5;">
  <li style="--animation-order: 6;">
</ul>

    3 times could look like so:

    @keyframes animateIn {
  0%, 31%, 64% {
    opacity: 0;
    transform: scale(0.6) translateY(-8px);
  }
  
  35%, 68%, 100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}
    Login or Signup to reply.
  2. 0

    To achieve this add animation-iteration-count: 3; (to play the animation 3 times) and animation-duration: 2s; to li tag in CSS.

    ul {
  padding: 0;
  display: block;
  margin: 24px auto;
  width: 320px;
}

li {
  display: block;
  height: 72px;
  width: 320px;
  background-color: #009688;
  animation-name: animateIn;
  animation-delay: calc(var(--animation-order) * 100ms);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3; /* number of times you want to play the animation */
  animation-duration: 2s;
}

li+li {
  margin-top: 16px;
}

@keyframes animateIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-8px);
  }
  100% {
    opacity: 1;
  }
}
    <ul>
  <li style="--animation-order: 1;"></li>
  <li style="--animation-order: 2;"></li>
  <li style="--animation-order: 3;"></li>
  <li style="--animation-order: 4;"></li>
  <li style="--animation-order: 5;"></li>
  <li style="--animation-order: 6;"></li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search