En el diseño del proyecto, se supone que se apilan 4 monedas una encima de la otra durante 2 segundos con un retraso de 0,5 segundos. (Según el código mencionado). Quiero que la reanimación comience automáticamente cuando termine el período de 4 segundos. ¿Es posible hacer esto sin JavaScript y usando Css?
Gracias de antemano por su cooperación
.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>Puede hacer esto simplemente usando CSS, pero tenga en cuenta que el tiempo total para la animación de una sola moneda debe ser de 4 segundos, no de 2. Durante 2 de esos segundos, aparece de opacidad 0 a opacidad 1 y luego desaparece a opacidad 0 inmediatamente (ese es el efecto del parámetro hacia atrás en la animación).
Entonces, la animación debe tener el 50% del tiempo aumentando la opacidad, luego el 50% con la opacidad 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>