Question

0

107

Views

how to re-execute animation when animation ends

In the project design, 4 coins are supposed to be stacked on top of each other for 2 seconds with a delay of 0.5 seconds. (According to the code mentioned). I want the re-animation to start automatically when the 4-second period is over.Is it possible to do this without JavaScript and using Css?

Thank you in advance for your cooperation

.Coins > img{
    width: auto;
    opacity: 0;
    position: absolute;
    animation:  appear 2s linear infinite backwards;
    -webkit-animation:  appear 2s linear infinite backwards;
}

.Coins > img:nth-child(1){
    top: 50%;
    left: 40%;
    animation-delay: 0.5s;
}

.Coins > img:nth-child(2){
    top: 47%;
    left: 41%;
    animation-delay: 1s;
}

.Coins > img:nth-child(3){
    top: 44%;
    left: 39%;
    animation-delay: 1.5s;
}

.Coins > img:nth-child(4){
    top: 41%;
    left: 40%;
    animation-delay: 2s;
} 


@keyframes appear{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes appear{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<div class="Coins">
    <img src="coin.png" alt="">
    <img src="coin.png" alt="">
    <img src="coin.png" alt="">
    <img src="coin.png" alt="">
</div>

]1]1

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T03:40:36.497Z

You can do this just using CSS, but notice that the overall time for the animation of a single coin has to be 4seconds, not 2. For 2 of those seconds it is appearing from opacity 0 to opacity 1 and then it disappears to opacity 0 immediately (that is the effect of the backwards parameter in the animation).

So, the animation needs to have 50% of the time increasing the opacity, then 50% with the opacity 0.

.Coins>img {
  width: auto;
  opacity: 0;
  position: absolute;
  animation: appear 4s linear infinite backwards;
  width: 10vmin;
  height: 2vmin;
  background: gold;
}

.Coins>img:nth-child(1) {
  top: 50%;
  left: 40%;
  animation-delay: 0.5s;
}

.Coins>img:nth-child(2) {
  top: 47%;
  left: 41%;
  animation-delay: 1s;
}

.Coins>img:nth-child(3) {
  top: 44%;
  left: 39%;
  animation-delay: 1.5s;
}

.Coins>img:nth-child(4) {
  top: 41%;
  left: 40%;
  animation-delay: 2s;
}

@keyframes appear {
  0%,
  50.001%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="Coins">
  <img src="coin.png" alt="">
  <img src="coin.png" alt="">
  <img src="coin.png" alt="">
  <img src="coin.png" alt="">
</div>

0

107

how to re-execute animation when animation ends

1 answers

0

Find remote jobs

Andres GPT