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>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>