Tengo un control deslizante CSS simple que recorre 4 imágenes de fondo, sin embargo, parpadea entre imágenes solo en el primer ciclo; Cuál es el más importante. Supongo que la mayoría de la gente no verá un control deslizante dos veces. Aquí hay un enlace para que pueda ver el problema https://awesome-darwin-135a87.netlify.app , y aquí está el CSS.

 .hero { background-color: var(--black); background-image: url('./images/1.jpg'); height: 100vh; background-position: center; background-size: cover; padding: 0.5rem calc((100vw - 1200px) / 2); display: flex; justify-content: flex-start; align-items: center; animation: slide 20s infinite; } @keyframes slide { 25%{ background-image: url('./images/2.jpg'); } 50%{ background-image: url('./images/3.jpg'); } 75%{ background-image: url('./images/4.jpg'); } 100%{ background-image: url('./images/1.jpg'); } }

Idealmente, me gustaría una forma de aplazar el HTML hasta que las imágenes se hayan cargado, pero podría haber una solución más simple a mi problema. He intentado comprimir los archivos de imagen y redujo el tiempo del flash pero no solucionó el problema. Otra solución que tenía en mente sería desvanecer cada imagen del fondo negro para que no parpadee y se vea más natural, pero no estoy seguro de cómo implementar dos animaciones para el conjunto de imágenes. Cualquier ayuda sería apreciada.